微客导航 » 文章资讯 » Vue.js常用指令的使用小结

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

2024-02-18 09:38:03 364

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

1.1v-text

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

实例：

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

实例：


{{message}}

1.3v-html

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

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

实例：

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

2.1v-show

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