v-bind基本使用
对属性动态绑定， 如a元素的href属性，img元素的src属性
- 作用： 动态绑定属性
- 缩写：:
- 预期：any (with argument) | Object (without argument)
- 参数: attrOrProp (optional)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<a v-bind:href="aHref">百度一下</a>
<!-- 语法糖的写法 -->
<a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
aHref: 'http://www.baidu.com'
}
})
</script>
</body>
</html>
动态绑定class（对象语法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: powderblue;
}
</style>
</head>
<body>
<div id="app">
<!-- <h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2> -->
<!-- <h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2> -->
<h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="..//js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
动态绑定class（数组语法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--active带单引号为字符串，不带则解析对应的值如aaaa -->
<h2 class="title" :class="[active, line]">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
active: 'aaaa',
line: 'bbbb'
},
methods: {
getClasses: function () {
return [this.active, this.line]
}
}
})
</script>
</body>
</html>
动态绑定style（对象语法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <h2 :style="{key(属性名): value（属性值）}">{{message}}</h2> -->
<!-- font-size或fontSize 两种写法 -->
<!-- '50px'必须加上单引号，否则是当做一个变量去解析 -->
<!-- <h2 :style="{fontSize: '50px'}">{{message}}</h2> -->
<!-- finalSize当成一个变量使用 -->
<!-- <h2 :style="{fontSize: finalSize}">{{message}}</h2> 此时写-> finalSize: '100px' -->
<!-- <h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2> -->
<h2 :style="getstyles()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
finalSize: 100,
finalColor: 'skyblue'
},
methods: {
getstyles: function () {
// 这里不要忘了this
return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
}
}
})
</script>
</body>
</html>
动态绑定style（数组语法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
baseStyle: {backgroundColor: 'skyblue'},
baseStyle1: {fontSize: '100px'},
}
})
</script>
</body>
</html>
