vue.js - Vue.js 在 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
属性的值如何,按钮都会消失。如果用户单击按钮,这些按钮应该是可见的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/
谁能解释一下原因。
解决方案
使用 v-text 将替换元素的内部文本/html,因此您看不到其中的删除按钮。所以你必须做你的第一个示例代码。
推荐阅读
- google-chrome - 如何私下测试因未在 Chrome Web Store 中列出而被禁用的 Chrome 扩展程序
- c# - 从服务器获取响应时出现异常:远程服务器返回错误:(500)内部服务器错误
- python - 将文本清理功能应用于多列
- c# - 隐藏的表单值未绑定到表单 POST
- fullpage.js - Fullpage.js 和移动设备:之前如何触发幻灯片更改?
- nginx - NGINX X-Accel-Redirect 不会自动传递 Content-Type?
- cassandra - Apache Cassandra db 是否有异步驱动程序?
- python - 排序如何比线性(低常数)更快?
- vim - Gcommit 后自动关闭 Gstatus 窗口或在同一窗口中打开 Gcommit
- terraform - 使用 terraform 0.12 中的列表迭代地图