vue中的js綁定樣式

添加class

  對象形式添加   activated為true時p標簽的class為activated false時為空

<div id="app">
            <p :class="{activated:activated}">內容部分</p>
</div>
 <script>
            var app=new Vue({
                el:"#app",
                data:{
                    activated:true
                }
            })
</script>

數組形式添加  activated的值是data中的內容即activated

<div id="app">
    <p :class="[activated,activated1]">內容部分</p>
</div>
<script>
    var app=new Vue({
                el:"#app",
                data:{
                    activated:"activated"
                }
               })
</script>        

 style綁定樣式

  對象形式

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

 

數組形式

<div id="app">
            <p :style="[styleObj,styleObj1]">內容部分</p>
</div>
 <script>
            var app=new Vue({
                el:"#app",
                data:{
                    styleObj:{
                        color:"red"
                    },
                    styleObj1:{
                        fontSize:"25px"
                    }
                }
            })
  </script>

 官方文檔 ：https://cn.vuejs.org/v2/guide/class-and-style.html