Vue——插值表达式
{{value}}
示例
HTML:
<div id="app">{{name}}</div>
JS:
var app = new Vue({
el:"#app",
data:{
name:"Jack"
}
})
总结
v-text(推荐)
示例
HTML:
<div id="app"> v-text:<span v-text="hello">vue数据绑定完成前显示的默认值</span> <br/> </div>
JS:
var vm = new Vue({ el:"#app", data:{ hello: "<h1>大家好,我是峰哥</h1>" } })
总结
- v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
v-html
示例
HTML:
<div id="app"> v-html:<span v-html="hello">vue数据绑定完成前显示的默认值</span> </div>
JS:
var vm = new Vue({ el:"#app", data:{ hello: "<h1>大家好,我是峰哥</h1>" } })
总结
- v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
- 存在一定的安全问题,容易出现脚本入侵,如无特殊需求建议使用v-text