html標簽的純文本顯示/被當做html標簽處理;
1)使用兩個大括號時,假如字符串內容是html標簽,那么不會被轉義;
2)使用三個大括號時,字符串內的html標簽會被直接轉義
a.兩個大括號:
1 <div id="app"> 2 {{html}} 3 </div> 4 <script> 5 var vm = new Vue({ 6 el:"#app", 7 data: { 8 html:"<span>span</span>" 9 } 10 }) 11 </script>
輸出結果:
1 <span>span</span>
b.三個大括號:
1 <div id="app"> 2 {{{html}}} 3 </div> 4 <script> 5 var vm = new Vue({ 6 el:"#app", 7 data: { 8 html:"<span>span</span>" 9 } 10 }) 11 </script> 12 <script> 13 function load() { 14 vm.$mount("#app"); 15 } 16 </script>
輸出:
1 span
3)插入內容的數據綁定無效(在沒有用partials的情況下),使用兩個大括號,三個大括號
1 <div id="app"> 2 {{{html}}} 3 </div> 4 <script> 5 var vm = new Vue({ 6 el:"#app", 7 data: { 8 html: "<span>span{{val}}</span>", 9 val: "11" 10 } 11 }) 12 </script> 13 <script> 14 function load() { 15 vm.$mount("#app"); 16 } 17 </script>
輸出:
span{{val}}
說明沒有數據綁定。
4)禁止在用戶提交的內容上動態渲染,否則會受到XSS攻擊
5)插值也可以用在html標簽的屬性中,例如class,或者id,或者其他。
但是Vue.js的指令和特殊性內是不可以用插值的。
