Vue.js 在 v-text 中连接字符串
Vue.js concatenate string in v-text
我正在尝试在 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
[=26= 的值如何].如果用户单击 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>
这是 fiddle:
https://jsfiddle.net/30a6edvs/
谁能解释一下原因。
使用 v-text 将替换元素的内部 text/html,因此您看不到其中的删除按钮。所以你必须按照你的第一个示例代码来做。
它实际上是更改元素并设置文本。
因此,如果您想要文本和按钮,那么您的第一种方法 (Mustache
interpolations
) 就是方法
If you need to update the part of
textContent
, you should use {{ Mustache }} interpolations.
我正在尝试在 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
[=26= 的值如何].如果用户单击 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>
这是 fiddle: https://jsfiddle.net/30a6edvs/
谁能解释一下原因。
使用 v-text 将替换元素的内部 text/html,因此您看不到其中的删除按钮。所以你必须按照你的第一个示例代码来做。
它实际上是更改元素并设置文本。
因此,如果您想要文本和按钮,那么您的第一种方法 (Mustache
interpolations
) 就是方法
If you need to update the part of
textContent
, you should use {{ Mustache }} interpolations.