5.3.vue入门基础学习笔记-基础指令介绍(属性绑定v-bind)

属性绑定v-bind

1 绑定普通属性

1.<a v-bind:href="url">百度一下</a>
2.<a :href="url">百度一下</a>
3.<a href="{{url}}">百度一下</a> <!--错误写法 无效-->
4.<button :disabled="someDynamicCondition">百度一下</button>
5.<a :href="url" :title="title">我是百度<a>
6.<a :href="url" :title="title" title="我是百度二号">我是百度<a>
<!--例1：标准写法 -->
<!--例2：简写  -->
<!--例3：错误写法 -->
<!--例4：如果someDynamicCondition的值为false disabled会消失 如果为true会存在-->
<!--例5：绑定多种属性-->
<!--例6：当vue绑定的属性存在时，以原生属性为准 并不会覆盖 class style不适用此规则 -->

2 绑定class

2.1 对象语法

• 可以在对象中传入多个属性用来动态切换多个 class
• 可以与普通的 class 属性共存
• 可以直接绑定数据里的一个对象
• 可以绑定返回对象的计算属性

<div class="static"   
      v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

2.2 数组语法

• 可以在数组中使用对象
• 可以在数组中使用表达式
• 可以直接绑定数据里的数组，数组中的所有字符串会作为class值
• 可以绑定返回对象的计算属性

<div v-bind:class="[activeClass, errorClass]">//
<div class="active text-danger"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">
<div v-bind:class="divClass">
data: {
  activeClass: 'active',
  errorClass: 'text-danger',
  divClass:["active","text-danger"]
}

3 绑定style

3.1 对象语法

• 可以在对象中传入多个属性(属性名是Style名，属性值是Style值)
• CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）
• 可以与普通的 style属性共存，两者会合并
• 可以直接绑定数据里的一个对象
• 可以绑定返回对象的计算属性

<div style="height:12px;" v-bind:style="styleObject">
    使用对象属性
</div>
<div style="height:12px;" v-bind:style="{'background-color':activeColor,width:width+'px' }">
    使用短横线，需要参数名加引号否则报错
</div>
<div style="height:12px;" v-bind:style="{backgroundColor:activeColor1,width:width+'px' }">
    将短横线属性可以转为驼峰标识
</div>
<div style="height:12px;" v-bind:style="styleO">
    使用计算属性
</div>
var vue = new Vue({
    el:'#app',
    data: {
        activeColor: 'red',
        activeColor1: 'green',
        width: 30,
        styleObject: {
            backgroundColor: 'black',
            width: '40px'
        }
    },
    computed:{
        styleO:function(){
            return {
                backgroundColor: 'blue',
                width: '50px'
            };
        }
    }
});

3.2 数组语法

• 可以将多个样式对象做成数组应用到一个元素上
• 数组里的元素必须是对象
• CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）
• 可以与普通的 style属性共存，两者会合并
• 可以直接绑定数据里的一个数组
• 可以绑定返回数组的计算属性

<div v-bind:style="[baseStyles, overridingStyles]">