Question

我需要动态显示工具提示。在span标签内编写v-for循环时出现错误。

    <span v-if="documentType === 'CourierReciept' && documentGroup === 'CourierDocuments'">
      <label>{{UploadText}} {{f.DisplayName}}</label>
      <span v-if="f.IsRequired == true">*</span>
      <span v-tooltip=" <span v-for= "(s,index) in staticText" :key="index"> 
             {{staticText.name}}>"<i class="fa fa-info-circle" aria-hidden="true"></i>
      </span>
   </span>

Answer 1

v工具提示docs给出了动态使用它的清晰思路。我将假设您已经正确安装了v-tooltip，并且可以开始使用了。如果您尝试

<span v-if="documentType === 'CourierReciept' && documentGroup === 'CourierDocuments'">
      <label>{{UploadText}} {{f.DisplayName}}</label>
      <span v-if="f.IsRequired == true">*</span>
      <span v-for= "(s,index) in staticText" :key="index">
        <span v-tooltip="s.name">
          <i class="fa fa-info-circle" aria-hidden="true"></i>
        </span>
      </span>
</span>

哪个跨度很大，会给您很多圈子，但可能会起作用。如果这不是您想要的，我建议您设置一个jsfiddle或codepen或我们可以看看的东西。

Answer 2

我在 VUE 中搜索了相同的查询“动态显示工具提示”。结果我得到了这个。

通过进一步研究，我发现这种语法有效：

v-bind:title=data.res

这里用在 forloop 中：

<div v-for="item in data">
    <div v-bind:title=item.from >{{item.from}} | {{item.date}}</div> <----- HERE ---
</div>

动态显示工具提示

2 个答案: