Vue（4）- 指令【v-html，v-bind】

标签：block   java   bsp   lock   class   app   code   div   color   

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>

Vue（4）- 指令【v-html，v-bind】

标签：block   java   bsp   lock   class   app   code   div   color   

原文地址：https://www.cnblogs.com/abdusalam10/p/11902204.html