我去饭馆吃饭，指着菜单上的地三鲜说：“我要第2个。”
服务员有点蒙；“西红柿炒鸡蛋？”
我：“第2个，地三鲜。”
服务员：“那是第3个吧。。。”
我：“我是程序猿。”
服务员：“那应该是第10个。”
我…
0、 系统指令v-bind
v-bind 作用：可以给元素动态绑定属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 基本用法1 -->
<a v-bind:href="url">去百度</a>
<!-- 基本用法2 -->
<a v-bind:href="'index.php?id=' + id">参数</a>
<!-- 简写 -->
<a :href="url" v-bind:id="id">去百度</a>
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
url: 'http://www.baidu.com',
id: 100
}
});
</script>
</html>
v-bind: 可以给任意属性绑定值，但有两个比较特殊： class / style
1、v-bind给class绑定对象
<style>
.color {
color: red
}
.font {
font-size: 40px;
}
</style>
<body>
<div id="app">
<a v-bind:href="url">百度一下</a>
//使用 v-bind 给元素绑定一个名类
<p :class="classColor">内容</p>
//使用 v-bind 给元素绑定多个名类： 注意： v-bind 无法给class 直接绑定多个类名
<p :class="classColor classFont">内容</p> //报错
<h1>使用 v-bind 通过绑定对象的形式给元素绑定多个类名</h1>
<p :class="{color: colorValue ,font: fontValue}">内容</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
url: 'http://www.baidu.com',
classColor: 'color',
classFont: 'font',
colorValue: false,//false表示不执行
fontValue: true//true表示执行
},
});
</script>
2、v-bind给class绑定数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.color {
color: red;
}
.font {
font-size: 40px;
}
</style>
</head>
<body>
<div id="app">
<h1>使用 v-bind 通过数组给 class 绑定多个类名</h1>
<h3>语法1</h3>
<p :class="[a, b]">内容</p>
<h3>语法2</h3>
<p :class="[a2, b2]">内容</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
a: 'color',
b: 'font',
a2: {
color: true
},
b2: {
font: false
}
},
});
</script>
</html>
3、v-bind给style绑定对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p :style="{ color: colorVal, fontSize: fontVal }">内容</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
colorVal: 'red',
fontVal: '40px'
},
});
</script>
</html>
4、v-bind给style绑定数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p :style="[a, b]">内容</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
a: {
color: 'red'
},
b: {
fontSize: '40px'
}
},
});
</script>
</html>