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> ~~~