VUE之bind指令用法小结

概念:v-bind,vue中使用v-bind对属性进行绑定从而实现动态传值，语法糖':',一般简写成 :属性="值"
下面简单聊聊使用的几个场景
一、v-bind通过动态绑定class进行属性传值

<div id="myapp">
     <div :class="activeClass">hello v-bind</div>
</div>
    <script>
        let vm=new Vue({
            el:"#myapp",
            data:{
                activeClass:'active'//动态的class
            },

二、v-bind通过动态绑定class属性对象传值 :class="{key:value}"

<div id="myapp">
        <ul v-for="(list,index) in lists" :key="index">
        <!--:class="{要绑定的class属性:变量或者表达式(结果为布尔值)}"-->
            <li :class="{active:num==index}" @click="fn(index)">{{list}}</li>
        </ul>
    </div>
    <script>
        let vm=new Vue({//options
            el:"#myapp",
            data:{      
                lists:['hello','vue','react','nodejs'],
            },
            methods:{
                fn(index){
                    this.num=index
                }
            },
            
        })
    </script>

三、v-bind动态绑定数组

 <div id="myapp">
 <!--直接数组里放变量-->
        <div :class="[active1,active2]">test data</div>
 <!--数组里套对象,属性名:变量或者表达式结果为布尔值-->
        ` <div :class="[{active1:true},{active:true}}]">test data test data</div>`
    </div>
    <script>
        let vm=new Vue({
            el:"#myapp",
            data:{
                active1:'active1',
                active2:'active2'
            }
        })
    </script>

四、动态绑定css样式 :style="{css属性名:css属性值,...}"

`<div :style="{width:'100px',color:'red'}">test</div>`