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