vue中的js绑定样式

添加class

  对象形式添加   activated为true时p标签的class为activated false时为空

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

数组形式添加  activated的值是data中的内容即activated

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

 style绑定样式

  对象形式

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

 

数组形式

<div 
                    }
                }
            })
  </script>

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