004 Vue的v-bind属性

v-bind

　　1. 插值表达式可以将变量的值插入到模板的内容中，即标签内容区域，不能插入到行内属性的值中去，如a标签的href的值，img标签的src值。

　　2. v-bind可以给行内属性绑定变量的值

       

v-bind的基本使用

　　1. 表明某个行内属性绑定的是一个变量而不是一个具体的值

　　　　如：<img v-bind:src="url" alt="">   这里url会被替换成url这个变量的具体的值

                简写方法：

                    :src="url"

　　2. 动态绑定class属性

　　　　1. 普通绑定

                    <div :class="aaa">你好啊</div>  // 绑定名为aaa的样式

　　　　2. 对象语法

                    <div :class="{类1：aaa, 类2: bbb}">你好啊</div>  // 类1和类2是两个样式的类名aaa，bbb为布尔值

                    当布尔值为true时，则对应的样式添加上了，当布尔值为false时，对应的样式不被添加

                    这里的:class也可以绑定一个函数，函数的返回值为{类1：aaa, 类2: bbb}

　　　　3. 数组语法

                    <div :class="[类1, 类2]">你好啊</div>       // 绑定两个类名为类1和类2的样式

　　　　4. 在同一个标签中，class="aaa"和:class="{类1：aaa, 类2: bbb}"时可以同时出现的

　　　　5. 这里class绑定的不管是类名，对象还是数组，总之都是数据，因此可以替换成绑定一个事件，事件返回值为这些数据

 

　　3. 动态绑定style属性

                    格式：<div :style="{属性名：属性值}"></div>

　　　　1. 绑定具体的属性值

                    <div :style="{color: 'red', fontSize: '50px'}">你好啊</div>   // 字体颜色为红色,字体大小为50px

　　　　2. 绑定变量名，变量名会被解析成变量的值

                    <div :style="{color: colorValue, fontSize: sizeValue}">你好啊</div>  

                        // 字体颜色为变量colorValue的值所指的那个颜色,字体大小为变量sizeValue的值所指的那个字体大小

　　　　3. 绑定数组

                    <div :style="[a1, b1]">你好啊</div>

                        这里的a1和b1是data中存储的对象，如：a1: {color: 'red'}, b1:{fontSize: '50px'}

　　　　4. 上述三个方法也可替换成绑定一个事件，事件返回值为对应的数据