v-html指令:{{ }} 会将数据解释为普通文本。为了输出真正的 HTML,需要使用 v-html 指令
1 <div id="app"> 2 <p>Using mustaches: {{ html }}</p> 3 <p v-html="html"></p> 4 </div> 5 <script type="text/javascript"> 6 var vm = new Vue({ 7 el : "#app", 8 data : { 9 html : ‘<span style="color:red">this is should be red</span>‘ 10 } 11 }); 12 </script>
v-bind指令:为html标签绑定属性,该属性的实际值是data里面对应的变量的值
1 <div id="app"> 2 <div v-bind:class="color">content</div> 3 <div v-bind:title="tips">content</div> 4 </div> 5 <script type="text/javascript"> 6 var vm = new Vue({ 7 el : "#app", 8 data : { 9 color:‘blue‘, 10 tips:‘提示‘ 11 } 12 }); 13 </script> 14 <style type="text/css"> 15 .blue{color:blue;} 16 </style>
原文:https://www.cnblogs.com/abdusalam10/p/11902204.html