(1)v-if
v-if 指令 用于条件性(根据表达式的值)渲染内容,可以与 v-else 指令 和 v-else-if 指令 一同使用
<html>
<head>
<title>Demotitle>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
head>
<body>
<div id="app">
<p v-if="type === 'A'">Ap>
<p v-else-if="type === 'B'">Bp>
<p v-else-if="type === 'C'">Cp>
<p v-else>Elsep>
div>
<script>
new Vue({
el: '#app',
data: {
type: 'A'
}
})
script>
body>
html>
(2)v-if & v-show
v-show 指令 同样可以根据表达式的真假渲染内容
<html>
<head>
<title>Demotitle>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
head>
<body>
<div id="app">
<p v-show="isSeen">Ap>
div>
<script>
new Vue({
el: '#app',
data: {
isSeen: true
}
})
script>
body>
html>
它们不同之处在于:v-if
是直接添加或删除 DOM 元素,而 v-show
是修改元素的 display 属性
因此,v-if
适用于相对稳定的元素,v-show
适用于频繁切换的元素
(3)template
v-if
是一个指令,因此必须添加到一个元素上,如果希望同时添加到多个元素上该怎么办呢?
可以使用 元素当做不可见的包裹元素,并在上面使用
v-if
<html>
<head>
<title>Demotitle>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
head>
<body>
<div id="app">
<template v-if="isOk">
<h1>Titleh1>
<p>Paragraph 1p>
<p>Paragraph 2p>
template>
div>
<script>
new Vue({
el: '#app',
data: {
isOk: true
}
})
script>
body>
html>
v-for 指令 用于渲染一个列表
(1)使用数组
<html>
<head>
<title>Demotitle>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
head>
<body>
<div id="app">
<ul>
<li v-for="item in items">
{{ item.message }}
li>
ul>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [
{ message: 'Hello' },
{ message: 'Hi' }
]
}
})
script>
body>
html>
v-for 用于数组时,还支持一个可选的第二个参数,即当前项的索引:v-for="(item, index) in items"
(2)使用对象
<html>
<head>
<title>Demotitle>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
head>
<body>
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
li>
ul>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
object: {
firstName: 'Steve',
lastName: 'Jobs'
}
}
})
script>
body>
html>
v-for 用于对象时,还支持一个可选的第二个参数,即当前项的键:v-for="(value, key) in object"
还支持一个可选的第三个参数,即当前项的索引:v-for="(value, key, index) in object"
(3)使用整数
<html>
<head>
<title>Demotitle>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
head>
<body>
<div id="app">
<span v-for="n in 10">{{ n }} span>
div>
<script>
var vm = new Vue({
el: '#app'
})
script>
body>
html>
(4)维护状态
当 Vue 正在更新使用 v-for
渲染的元素列表时,它默认使用 “就地更新” 的策略
也就是说,如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序
而是就地更新每个元素,并且确保它们在每个索引位置正确渲染
因此为了跟踪每个节点,我们需要为每一个项提供一个唯一的 key
(一般使用基本属性作为 key
)
<div v-for="item in items" v-bind:key="item.id">
div>
(5)数组 更新检测
对于数组而言,使用变异方法会自动触发视图更新,变异方法包括:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
// 可以尝试在控制台中直接对前面的例子调用变异方法
vm.items.push({ message: 'Goodbye'})
而使用非变异方法则总是返回一个新数组,这时可以使用新数组替代旧数组以触发视图更新,非变异方法包括:
filter()
concat()
slice()
// 可以尝试在控制台中对前面的例子调用非变异方法,使用新数组替代旧数组
vm.items = vm.items.filter(function (item) {
return item.message.match(/Hi/)
})
注意,还有以下两种情况不能检测数组的变化:
vm.items[indexOfItem] = newValue
vm.items.length = newLength
这时,我们都可以使用变异方法 splice()
解决:
vm.items.splice(indexOfItem, 1, newValue)
vm.items.splice(newLength)
(6)对象 变更检测
以下的情况同样不能检测对象的变化:
vm.newValue = value
(此时,newValue 不是响应式属性)这时,我们可以使用实例方法 vm.$set
解决:
vm.$set(object, propertyName, value)
【 阅读更多 Vue 系列文章,请看 Vue学习笔记 】