vue中的v-bind指令

绑定标签属性

像div、p、img等等都是标签，img标签中的src就是一个属性。

未使用v-bind:

    <div>
       <img src="..." width="200px"/>
    </div>

使用v-bind:

    <div>
       <img v-bind:src="imgSrc" width="200px"/>
    </div>
     
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                imgSrc:'...',
            }
        })
    </script>

存在简写方法，即将v-bind省略，留下冒号：

    <div>
       <img :src="imgSrc" width="200px"/>
    </div>

先列出接下来示例中的所需要的js和样式:

    <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    imgSrc: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3755764342,2798173177&fm=26&gp=0.jpg',
                    className: 'classA',
                    isOk: true,
                    classA: 'classA',
                    classB: 'classB',
                    isTrue: true,
                    red: 'red',
                    font: '20px',
                    styleObject: {
                        color: 'green',
                        fontSize: '40px',
                    }
                }
            })
        </script>
        
        //css样式
        <style>
            .classA {
                color: red;
            }
            
            .classB {
                font-size: 150%;
            }
        </style>

示例1：绑定class属性

其中className绑定的是classA样式，结果显示的是classA的样式。

<div :class="className">1、绑定Class</div>

示例2：给class绑定一个判断

此处结合了v-model指令，对isOk进行一个值的改变，通过isOk的改变来判断是否使用classA的样式。

    <div :class="{classA:isOk}">2、绑定Class中的判断
                <input type="checkbox" id="isOk" value="isOk" v-model="isOk">
                <label for="isOk">{{isOk}}</label>
     </div>

示例3：以数组的形式绑定class

class属性中是一个数组，同时在data中声明classA,classB，会同时显示classA和classB的样式。

<div :class="[classA,classB]">3、以数组的形式绑定class</div>

示例4：通过三元运算符绑定class

类似于上面的绑定一个判断，不过是通过isTrue这个媒介，利用三元运算符来决定显示的是哪个样式。

    <div :class="isTrue?classA:classB">4、通过三元运算符绑定class
                <input type="checkbox" id="isTrue" v-model="isTrue">
                <label for="isTrue">{{isTrue}}</label>
    </div>

示例5：绑定style

写法与内联css样式类似，但是需要申明red和font。

注意：在vue中，不支持font-size的写法，支持fontSize。

<div :style="{color:red,fontSize:font}">5、绑定style</div>

示例6：通过对象绑定style

styleObject声明为一个对象。

<div :style="styleObject">6、以对象形式绑定style</div>