0

我正在尝试在 v-text 指令中连接字符串。简单的例子:

<ul>
  <li v-for="obj in frameworks"> {{ obj.name }} has {{ obj.vite }} users
    <button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
  </li>
</ul>

这工作正常。现在,如果我使用下面的 v-text,而不是使用文本插值,我仍然会显示文本,但Delete无论mode属性的值如何,按钮都会消失。如果用户单击按钮,这些按钮应该是可见的edit

 <ul>
    <li v-for="obj in frameworks" v-text="`${obj.name} has ${obj.votes} users`">
     <button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
    </li>
 </ul>

这是小提琴: https ://jsfiddle.net/30a6edvs/

谁能解释一下原因。

4

2 回答 2

2

使用 v-text 将替换元素的内部文本/html,因此您看不到其中的删除按钮。所以你必须做你的第一个示例代码。

于 2018-11-22T06:01:44.737 回答
1

它实际上改变了元素并设置了文本。

因此,如果您想要文本和按钮,那么您的第一个方法(Mustache interpolations)就是方法

如果你需要更新 的部分 textContent,你应该使用 {{ Mustache }} 插值。

细节

于 2018-11-22T06:11:44.350 回答