绑定 style 样式
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
1
2
3
| .active{
color: red;
}
|
1
2
3
| <div id="app">
<div v-bind:class="{ active: isActive }">我不一定是红色的DIV</div>
</div>
|
1
2
3
4
5
6
| new Vue({
el: '#app',
data: {
isActive: true
}
})
|
我不一定是红色的DIV
上面的 { active: isActive } 表示是否存在 active 属性取决于 isActive 的值是 true 还是 false。
当然这个动态 class 也可以和静态的 class 共存。
1
| <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
|
我们也可以将绑定的动态 class 定义在 data 内：
1
2
3
4
5
6
7
| .active{
color: red;
}
+
+.fw{
+ font-weight: 800;
+}
|
1
| <div v-bind:class="classObject"></div>
|
1
2
3
4
5
6
7
8
9
10
| new Vue({
el: '#app',
data: {
- isActive: true
+ classObject: {
+ active: true,
+ fw: true
+ }
}
})
|
我不一定是红色的DIV
渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
1
2
3
| <div id="app">
<div v-bind:class="classObject">DIV</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| new Vue({
el: '#app',
data: {
isActive: false,
isFw: true
},
computed: {
classObject: function(){
return {
active: this.isActive,
fw: this.isFw
}
}
}
})
|
绑定内联样式
绑定内联样式可以使用 v-bind:style 来实现：
1
| <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
|
1
2
3
4
| data: {
activeColor: 'red',
fontSize: 30
}
|
直接绑定到一个样式对象通常更好，这会让模板更清晰：
1
| <div v-bind:style="styleObject"></div>
|
1
2
3
4
5
6
| data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
|
从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
1
| <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
|
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
条件渲染
这个比较简单，和我们 Java 中的 if...else if...else 比较像：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
|
1
2
3
4
5
6
| new Vue({
el: '#app',
data: {
type: 'D'
}
})
|
如果我们只是单纯的判断 true 和 false 来让元素显示或者隐藏，建议使用 v-show ，因为它比 v-if 开销小：
1
| <h1 v-show="ok">Hello!</h1>
|
同样的，可以使用 v-for 来遍历集合：
1
2
3
| <li v-for="todo in todos">
{{ todo }}
</li>
|
类似于 v-if，你也可以利用带有 v-for 的 <template> 渲染多个元素。比如：
1
2
3
4
5
6
| <ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
|
事件处理
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
1
2
3
4
| <div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
|
1
2
3
4
5
6
| var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
|
通常比较复杂的事件处理我们会这样将事件处理放入 mothods:
1
2
3
4
5
| <div id="example-1">
- <button v-on:click="counter += 1">Add 1</button>
+ <button v-on:click="count">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
| var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
},
methods: {
count: function(event){
this.counter++
}
}
})
|
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
1
2
3
4
5
| <div id="example-1">
- <button v-on:click="count">Add 1</button>
+ <button v-on:click="count(3)">Add 3</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
},
methods: {
- count: function(event){
- this.counter++
- }
+ count: function(add){
+ this.counter = this.counter + add
+ }
}
})
|
