VueJs中 v-bind指令 的用法

v-bind 可以实现动态改变属性的属性值

1.基础用法：
后期可以通过操作app.msg动态改变src的属性值

    <div id="ve">
    	<!-- 冒号是v-bind是简写 -->
        <img :src="msg">
    </div>
    
    <script>
        const app = new Vue({
            el: '#ve',
            data: {
                msg: 'img/1.jpg',
            }
        });
    </script>

2.可以动态绑定class
json语法

css样式

<style>
    .red {
        color: red;
    }

    .big {
        font-size: 22px;
    }
</style>

div被绑定上了red属性 若此时修改app.isbig为true可以动态绑定class属性

 <div id="ve">
        <div :class="{red:isred,big:isbing}"> v-bind </div>
    </div>

    <script>
        const app = new Vue({
            el: '#ve',
            data:{
                isred:true,
                isbig:false,
            }
        });
    </script>
    

以上代码可以优化为：

<div id="ve">
        <div :class="getClasses()"> v-bind </div>
    </div>

    <script>
        const app = new Vue({
            el: '#ve',
            data: {
                isred: true,
                isbig: false,
            },
            methods: {
                getClasses: function () {
                    return { red: this.isred, big: this.isbing };
                }
            }
        });
    </script>

Array语法
这样写div 被绑定上了俩个属性值 动态改变app,arr中的元素改变属性

   <div id="ve">
        <div :class="arr"> v-bind </div>
    </div>

    <script>
        const app = new Vue({
            el: '#ve',
            data: {
                isred: true,
                isbig: false,
                arr:['red','big']
            },
            methods: {
                getClasses: function () {
                    return { red: this.isred, big: this.isbing };
                }
            }
        });