vue.js实现插入数值与表达式的方法分析
本文实例讲述了vue.js实现插入数值与表达式的方法。分享给大家供大家参考,具体如下:
vue.js在插入数值的时候有三种方式
1、插入纯文本
插入纯文本是最简单的方式,使用双大括号就能插入想要的值。
{{msg}}
mustache也可以在属性中使用
就能显示所需要显示的文本信息了。但是有时候,我们想要插入的html文本,这时候要怎么办呢?在插入html的时候有两种方式,一种是用三个大括号的形式,这种是在vue.js1.x版本时候使用较多,但是在vue.js2.x的时候,插入纯文本的时候开始使用v-html的形式。
2、插入html
{{{msg}}}//vue.js1.x版本
被插入的内容都会被当做HTML——数据绑定会被忽略。注意,你不能使用v-html来复合局部模板,因为Vue不是基于字符串的模板引擎。组件更适合担任UI重用与复合的基本单元。此外不建议将用户输入的值直接作为html显示,这样有可能会造成XSS攻击。对用用户输入显示的值一定要做必要的过滤之后才能真正显示。
3、属性
对于双大括号,不能在html属性中使用,对于属性,使用v-bind来绑定数据。