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]">

9baa