vue的指令之v-bind

v-bind的作用

v-bind是动态绑定标签上的属性的值，也可以给标签的class设置动态的值，还可以给标签的style设置动态的值。

v-bind动态绑定标签的属性值

语法

<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>

    <!-- 完整写法 -->
    <!-- v-bind动态绑定标签的属性值 -->
    <img v-bind:src="imgUrl" alt="">

简写：省去v-bind只写个“:”

<元素 :属性名1="值1" :属性名2="值2"></元素>

    <!-- 简写 -->
    <img :src="imgUrl" alt="">

当我们给标签中的属性使用v-bind动态绑定，那就表示双引号里面的就存放的是一个变量，这个变量我们会存放在script里面的data里面。

v-bind给标签的class设置动态的值

语法

<标签 :class="变量" />

    <!-- 绑定的值是变量 -->
    <p :class="type">p的内容</p>

<标签 :class="数组" />

    <!-- 绑定的值数组 -->
    <p :class="['red','f40']">p的内容</p>

<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />

如果布尔值为true，就添加对应的类名

    <!-- 动态绑定的值为对象 -->
    <p :class="{red:false,blue:true,f40:true}">p的内容</p>

动态绑定的值和没有动态绑定class是可以共存的

    <!-- 动态绑定和class可以共存 -->
    <p class="bg" :class="{red:false,blue:true,f40:true}">p的内容</p>

v-bind给标签的style设置动态的值

语法

<标签 :style="{css属性名: 值}" />

    <p :style="{color:'red'}"></p>
    <!-- 动态绑定的值是放在data里面的对象，对象里面存放的样式属性-->
    <p :style="obj">p的内容</p>

注意点：可以和静态style共存，样式中带-属性写成小驼峰

data() {
    return {
      obj:{
        // 不能和css中的样式名一样带-，需要改成驼峰命名
        backgroundColor:'#666',
        color:'rgb(30,90,40)',
        fontSize:'40px'
      }
    }
  }