Vue指令的v-斗篷、v-文本和v-html示例的详细说明

v形斗篷

当用户频繁刷新页面或者网速较慢时，Vue.js的加载没有完成，导致Vue渲染延迟，导致浏览器中插值(表达式)的直接暴露。因此，Vue也给出了解决方案。

将v-斗篷命令添加到指定的标签或整个父容器，通过css选择器选择v-斗篷，并隐藏元素。

//html div v-斗篷id=' app ' span { { msg } }/span/div//CSS[v-斗篷]{ display : ' none '；}//vue实例对象=VM var VM=newvue ({el:' # app '，data: {msg:' hello world '，} })

从图中可以看出，当Vue传输页面数据时，如果插值表达式一开始无法得到数据，那么包含“v-斗篷”属性的节点就会执行“display:none”样式，这样页面就什么都看不到了。当插值表达式得到数据时，“v-斗篷”属性将自动从节点中移除，然后样式将不起作用，从而显示正常数据。

那么，v-斗篷命令渲染的数据会影响附近元素的内容吗？

如您所见，v-斗篷指令不会覆盖元素内容。

v-textv-text指令与v-斗篷指令非常相似。v-text指令不公开插值，但覆盖附近元素的内容。//html div id=' app ' span v-text=' msg '这些是一些单词/span/div//vue实例对象=VM var VM=newvue ({el:' # app '，data3360 {msg:' hello world '，} })

我在span标签中添加了“这是一些文本”，但是vue覆盖了元素内容，并在完成后删除了v-text命令。

v-html

将字符串转义成html代码，并将其插入文档。需要注意的是，v-html还会覆盖附近元素的内容。

div id=' app ' p v-html=' html '/p/div//vue实例对象=VM var VM=newvue ({el:' # app '，data: {html3360 '我是由v-html指令插入的' } })

v-HTML指令为我们输出真实的HTML代码，执行后去掉指令对元素的绑定。

摘要

以上是边肖介绍的Vue指令的v-斗篷、v-text、v-html示例的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！