属性绑定
v-bind
双大括号不能在 HTML 属性中使用，因为它们不是有效的属性值。取而代之的是，我们可以使用 v-bind 指令，它允许我们动态地绑定一个或多个属性，或者一个组件 prop 到表达式。
1
| <div v-bind:id="dynamicId"></div>
|
在这里，dynamicId 表达式的值会被作为 id 属性的值传递给 div 元素。这个表达式可以是任何返回字符串的合法 JavaScript 表达式，通常是一个 data 中的属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <template>
<div v-bind:id="dynamicId" v-bind:class="dynamicClass"><p>AppID</p></div>
</template>
<script>
export default {
data(){
return {
dynamicClass:"appclass",
dynamicId:"appid"
}
}
}
</script>
<style>
.appclass{
color:red;
font-size: 30px;
}
</style>
|
简写
v-bind 十分常用，所以 Vue 提供了一个缩写：
1
2
3
4
5
|
<a v-bind:href="url">...</a>
<a :href="url">...</a>
|
bool attribute
bool 型的 HTML attribute，如果它的值是 false、null 或 undefined，则该 attribute 不会被包含在渲染出来的元素中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <template>
<div>
<button :disabled="isButtonDisabled">Button</button>
</div>
</template>
<script>
export default {
data(){
return {
isButtonDisabled:true
}
}
}
</script>
|
动态绑定多个属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<div>
<button :disabled="isButtonDisabled" :id="dynamicId" :class="dynamicClass">Button</button>
</div>
</template>
<script>
export default {
data(){
return {
isButtonDisabled:true,
dynamicClass:"appclass",
dynamicId:"appid"
}
}
}
</script>
|
条件渲染
在 Vue 中，我们可以使用 v-if、v-else-if、v-else 来创建条件块。这类似于 JavaScript 中的 if、else if 和 else。
v-if
v-if 是一个指令，它需要一个表达式作为参数。如果该表达式的值为真，则渲染元素，否则不渲染。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<div>
<h3>条件渲染</h3>
<p v-if="seen">现在你看到我了</p>
<button @click="seen = !seen">切换</button>
</div>
</template>
<script>
export default {
data() {
return {
seen: true
}
}
}
</script>
|
展开另一个 e.g.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <template>
<h3>条件渲染</h3>
<p v-if="seen">现在你看到我了</p>
<p v-else>现在你看不到我了</p>
<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>
</template>
<script>
export default {
data() {
return {
seen: true,
type: 'A'
}
}
}
</script>
|
v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<div>
<h3>条件渲染</h3>
<p v-show="seen">现在你看到我了</p>
<button @click="seen = !seen">切换</button>
</div>
</template>
<script>
export default {
data() {
return {
seen: true
}
}
}
</script>
|
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做 - 在条件第一次变为真时才开始渲染条件块。
相比之下，v-show 就简单得多 - 不管初始条件如何，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
列表渲染
我们可以使用 v-for 指令基于一个数组来渲染一个列表。
需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <template>
<div>
<h3>列表渲染</h3>
<ul>
<li v-for="item in items" :key="item.id">{{item.text}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: '蔬菜' },
{ id: 2, text: '奶酪' },
{ id: 3, text: '随便其它什么人吃的东西' }
]
}
}
}
</script>
|
item in items 中间的 in 可以使用 of 替代。
1
| <div v-for="item of items"></div>
|
v-for index
v-for 还支持一个可选的第二个参数为当前项的索引。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <template>
<div>
<h3>列表渲染</h3>
<ul>
<li v-for="(item,index) in items" :key="item.id">{{index}} - {{item.text}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: '蔬菜' },
{ id: 2, text: '奶酪' },
{ id: 3, text: '随便其它什么人吃的东西' }
]
}
}
}
</script>
|
v-for object
v-for 也可以遍历对象的属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <template>
<div>
<h3>列表渲染</h3>
<ul>
<li v-for="(value,key,index) in object" :key="index">{{index}} - {{key}} - {{value}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
}
}
</script>
|
(value,key,index) in object 中三个参数的顺序不能变，value 是属性值，key 是属性名，index 是索引。