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