Vue- v-html指令

来源：互联网发布：战略规划知乎编辑：程序博客网时间：2024/05/17 21:54

双大括号的数据绑定写法{{ }}会被VUE当成纯文本输出，为了能够输出HTML，需要用到V-HTML指令

<div v-html='message'>{{message}}</div>

在这个指令下数据绑定会被忽略，而被当成HTML

注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元（这句话暂时不知道什么意思）

如果尝试在v-html绑定的结构中再添加其他内容（无论是文本还是HTML），都会被忽略，比如

<div id="example" v-html='message'>
11111//此处无论是文本。或者其他标签，均不会显示，只会解析{{message}}的内容，所以如果用到v-html指令时，需要单独添加一个元素来绑定，刚开始我以为是因为我写在里面的内容因为包含了 v-model(对应官方解释数据绑定会被忽略)而无法显示，去掉v-model单纯的为

<div id="example" v-html='message'><input type="text"/><div >{{message}}</div></div>

也是无法显示input控件的

<div >{{message}}</div>
</div>

！！！你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。

------------------------------------data中数据赋初始值-------------------------------------

可以先给数据赋值再在创建实例的时候绑定数据

var data={mydata:{a:1},message:"<div style='background:red;width:50px;height:50px'></div>"}var vm = new Vue({  el: '#example',  data:data})

v-once指令

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

<span v-once>This will never change: {{ msg }}</span>

0 0