Vue.js常用指令的使用小结

前端之家收集整理的这篇文章主要介绍了Vue.js常用指令的使用小结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.数据渲染:v-text、v-html、{{}}

1.1 v-text

详细:更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。

实例:

1.2 {{}} 和上面的v-text效果一样

实例:

{{message}}

1.3 v-html

详细:更新元素的 innerHTML 。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用v-html 组合模板,可以重新考虑通过是否通过使用组件来替代。

注意:在网站上动态渲染任意 HTML 是非常危险的,因为容易导致XSS攻击。只在可信内容上使用v-html,永不用在用户提交的内容上。

实例:

2.条件渲染 控制模板隐藏:v-show 、v-if、v-else

2.1 v-show

用法:根据表达式之真假值,切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果

注意: v-show 不支持