第八课 Vue中的v-bind指令

Vue中的v-bind指令

v-bind用于属性绑定，使得属性可以动态修改

v-bind动态修改class

动态修改的class名来源于data对象，而非手动给定

1. 基础示例

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .bg {
            background: red;
        }
    </style>
    <div id="app">
        <div v-bind:class="bg"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                bg: 'bg'
            }
        })
    </script> 

2. v-bind简写

v-bind可以利用:作为简写方式

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .bg {
            background: red;
        }
    </style>
    <div id="app">
        <div :class="bg"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                bg: 'bg'
            }
        })
    </script> 

3. 多class名不冲突

动态绑定的class与原生class名不冲突，最终会合并成为一个

    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .bg {
            background: red;
        }
    </style>
    <div id="app">
        <div class="test" :class="bg"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                bg: 'bg'
            }
        })
    </script> 

4） v-bind绑定多class名

        <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .bg {
            background: red;
        }

        .color{
            color: blue;
        }
    </style>
    <div id="app">
        <div class="test" :class="[bg, color]">{{val}}</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: 'Hello World !',
                bg: 'bg',
                color: 'color'
            }
        })
    </script> 

5. class状态控制

v-bind中的内容可以以{}运算符配合，进行简单的JS运算

1） 动态切换class

        <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .bg {
            background: red;
        }
    </style>
    <div id="app">
        <input type="button" value="点击我切换显示状态" @click="fun()">
        <div class="test" :class="{bg: status}"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                bg: 'bg',
                status: true
            },
            methods: {
                fun(){
                    this.status = !this.status;
                }
            }
        })
    </script> 

v-bind绑定内嵌样式

v-bind style 可以进行内嵌样式编写，属性值为字符，多属性用逗号分隔

1） 基础示例

    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
    </style>
    <div id="app">
        <div class="test" :style="{background: 'red', width: 200 + 'px'}"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
        })
    </script> 

2） 动态内嵌样式

    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
    </style>
    <div id="app">
        <div class="test" :style="style"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                style: {background: 'red', width: 200 + 'px'}
            }
        })
    </script> 

3. 多样式合并

    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
    </style>
    <div id="app">
        <div class="test" :style="[style1, style2]"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                style1: {background: 'red', width: 200 + 'px'},
                style2: {height: 200 + 'px'}
            }
        })
    </script>