v-bind
壤驷雅达
1.v-bind指令
v-bind作用：动态绑定属性
除了内容需要动态决定，有些属性我们也希望动态绑定
比如a元素的href属性、img元素的src属性
错误做法
<img src="{{imgURL}}" alt="">
属性后面不可以用Mustache语法
正确做法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
imgURL: '../images/01.jpg',
aHref: 'https://www.baidu.com'
}
})
</script>
</body>
</html>
语法糖的写法：就用一个冒号
<img :src="imgURL" alt="">
<a :href="aHref">百度一下</a>
2.v-bind动态绑定class
2.1绑定方法：对象语法(class后面跟的是一个对象)
使用方法：<h2 class="{类名1：boolean, 类名2: boolean}">{{message}}}</h2>
当类名的值为true，那么这个class就被添加到当前标签，值为false就不添加
2.2 绑定方法：数组语法(用的较少)
如果{}中的内容很复杂，可以放到methods中，然后再调用这个方法。
使用方法：<h2 class="[类名1, 类名2]">{{message}}}</h2>
当[]里面的类名加了引号就表示字符串它本身，不加引号就表示一个变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
.active {
color:red;
}
</style>
</head>
<body>
<div id="app">
<!-- 对象语法-->
<!-- <h2 class="{类名1：boolean, 类名2: boolean}">{{message}}}</h2>-->
<h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
<!-- 数组语法-->
<h2 class="title" :class="['active','line']">{{message}}</h2>
<h2 class="title" :class="[active,line]">{{message}}</h2>
<!-- 按钮-->
<button v-on:click="btnClick">改变颜色</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊！',
isActive: true,
isLine: false
},
methods: {
btnClick: function(){
this.isActive = !this.isActive;
},
getClasses: function(){
return {active: this.isActive, line: this.isLine};
}
}
})
</script>
</body>
</html>
3.v-bind动态绑定style
3.1 对象语法
用法：style后面跟的是对象类型
<h2 :style="{key(属性名): value(属性值)}">{{message}}
写css属性名的时候
可以用驼峰式(camelCase)，如fontSize
也可以用短横线分割(kebab-case)，如front-size
3.2数组语法
用法：style后面跟的是数组类型，多个值以‘,’分割
<h2 :style=",[属性名1，属性值2]">{{message}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 对象语法-->
<!-- 50px必须加上一对单引号，否则被当成变量去解析-->
<h2 :style="{fontSize: '50px'}">{{message}}</h2>
<!-- fSize被当成一个变量去解析-->
<h2 :style="{fontSize: fSize,background:bColor}">{{message}}</h2>
<h2 :style="{fontSize: fSize_value + 'px'}">{{message}}</h2>
<!-- 数组语法-->
<h2 :style="[baseStyle1,baseStyle2]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊！',
fSize:'100px',
fSize_value:100,
bColor:'red',
baseStyle1: {background:'blue'},
baseStyle2: {fontSize: '30px'},
}
})
</script>
</body>
</html>
类似资料：