Question

我正在尝试在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/

任何人都可以解释原因。

Answer 1

使用v-text将替换元素的内部text / html，因此您看不到其中的Delete按钮。因此，您必须作为第一个示例代码。

Answer 2

它实际上是在更改元素并设置文本。

因此，如果您想要文本和按钮，那么您的第一种方法（Mustache interpolations）是

如果您需要更新 textContent，应使用{{Moustache}}插值。

Details

Vue.js在v-text中连接字符串

2 个答案: