[TOC] # 绑定语法 ### 1.v-pre 指令 让在data里面定义的变量不通过渲染显示，直接正常显示内容 ### 2. v-html指令 若定义的变量中带有标签，则显示标签在页面内容中，相当于innerHtml ### 3.v-text指令 将变量的内容显示在指定标签页面中，若内容中包含有标签，会把标签认为是字符显示，相当于innerText ***** ### 例子 ``` <div id="app"> <p>{{a}}</p> <!-- 不渲染{{a}} --> <p v-pre>正常显示{{a}} <span>也不会渲染{{a}}</span> </p> <!-- 显示标签，相当于innerhtml --> <p v-html = 'html'></p> <!-- 不显示标签，相当于innertext --> <p v-text = 'b'></p> <!-- 变量拼接 --> <p v-text = 'a + c'></p> <p>{{a + c}}</p> <p>=============</p> <!-- 当插值语法跟v-text指令同时存在时，浏览器后先渲染插值语法，然后再解析v-text指令，并且覆盖前面的渲染结果 --> <p v-text = 'c'>{{a}}</p><!-- 结果为3 --> </div> <script> // 实例vue new Vue({ el:'#app', data:{ a:'变量a', html:'<a href="www.baidu.com">www.baidu.com</a>', b:'<p>标签没有作用</p>', c:3 } }) </script> ``` **注意** 当插值语法跟v-text指令同时存在时，浏览器后**先渲染插值语法，然后再解析v-text指令**，并且**覆盖前面的渲染结果**