【vue】样式绑定

对于样式大家是不是很熟悉呢？没有错就是css
在vue中class也是可以绑定的，是不是很神奇

一、class样式绑定

1、class对象绑定

<style>
    .activated{
    color:red;
    }
</style>
    
 <div id="app">
    <div @click="handleDivClick"
    :class="{activated:isActivated}">
    hello world
    </div>
 </div>
    
 <script>
    var vm=new Vue({
    el:"#app",
    data:{
    isActivated:false
    },
    methods:{
    handleDivClick:function(){
    this.isActivated=!this.isActivated;
    }
    }
    })
 </script>

解析：就是 :class=“对象”，这样就是对象绑定

2、class数组绑定

<style>
    .activated{
    color:red;
    }
</style>
    
<div id="app">
    <div @click="handleDivClick"
    :class="[activated]">
    hello world
    </div>
</div>
    
 <script>
    var vm=new Vue({
    el:"#app",
    data:{
    activated:""
    },
    methods:{
    handleDivClick:function(){
    this.activated=this.activated==="activated"?"":"activated"
    }
    }
    })
</script>

解析：:class=“[数组]”，这样就是数组绑定，代码中数组绑定一个，也可以放两个或者多个，只需要英文逗号隔开就可以了

二、style的样式绑定

也分为对象绑定和数组绑定
1、对象绑定

:style=“对象”

例如：
<div id="app">
    <div @click="handleDivClick"
    :style="styleobj">
    hello world
    </div>
</div>

2、数组绑定

:style=“[数组]”

例如：
<div id="app">
    <div @click="handleDivClick"
    :style="[styleobj,{fontSize:'20px'}]">
    hello world
    </div>
</div>

结果展示：