vue數據綁定html


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的指令和特殊性內是不可以用插值的。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM