v-html和v-text · vue

# v-html和v-text v-html和v-text都是渲染文本的指令，使用场景会有不同现在我们学习的渲染方法 Ø双大括号插值：{{}} Øv-text Øv-html 双大括号和v-text渲染结果类似，都是会以文本类型进行渲染 ``` {{a}} var vue = new Vue({ el: "#app", data: { a:'我是要插值的内容' } }) ``` 区别： 1)双大括号在渲染结果之前，会有编译之前的文本显示，v-text是没有这种现象的 2)双大括号更灵活，中间是可以添加内容的，v-text是只能渲染data中的数据，中间不允许插入内容 \-----------{{a}}------------ -------------------- 双大括号和v-text它俩的渲染方式和v-html有本质不同，v-html会识别模板 ``` var vue = new Vue({ el: "#app", data: { a:'我是要插值的内容' } }) ``` # 代码案例： ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <p>------------{{a}}--------</p> <p v-text="a">--------------</p> </div> </body> <script src="vue/vue.js"></script> </html> <script type="text/javascript"> var vue=new Vue({ el:"#app", data:{ a:'<h1>我是插值的内容</h1>' } }) </script> ~~~