vue 中的样式绑定(class和style 的对象和数组形式)

1,class的对象绑定

<div :class="{actived:isActive}"></div>//actived这个类是否加载取决于isActive这个变量的true还是false

2,class和数组绑定,数组里可以有多个变量,变量代表类名

<div :class="[actived]"></div>//类名取决于actived这个变量是什么

3,内联样式(对象形式)

<div id="app" :style="styleObj"></div>
<script>
    var vm = new Vue({
      el:"#app",
      data:{
         styleObj:{
              color:"red"
         }
       }
    })
</script>

4,内联样式(数组形式)

<div id="app" :style="[styleObj,{fontSize:'20px'}]"></div>
<script>
    var vm = new Vue({
      el:"#app",
      data:{
         styleObj:{
              color:"red"
         }
       }
    })
</script>

版权声明:本文为qq_36958916原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。