条件渲染
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
v-else
也可以用 v-else 添加一个“else 块”：
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no </h1>
v-else-if
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<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>
v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 的display属性。
v-if vs v-show
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
列表渲染
v-for 遍历数组
<div id="app">
<h2>使用v-for遍历数组</h2>
<ul>
<li v-for="(person,index) in persons" :key="person.id">姓名：{{person.name}} 年龄：{{person.age}}
<button @click="delPerson(index)">删除</button>
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: '#app',
data: {
persons: [
{id: 1, name: 'jason', age: 30},
{id: 2, name: 'mike', age: 20},
{id: 3, name: 'jay', age: 37},
{id: 4, name: 'jolin', age: 28},
]
},
methods: {
delPerson(index) {
this.persons.splice(index, 1)
}
}
})
</script>
v-for 遍历对象
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
结果：
DEMO
-
演示
-
代码
<div id="app">
<input type="text" v-model="searchName">
<ul>
<li v-for="(person,index) in filterPersons" :key="person.id">姓名：{{person.name}} 年龄：{{person.age}}
</li>
</ul>
<button @click="orderWay='asc'">按年龄升序</button>
<button @click="orderWay='desc'">按年龄降序</button>
<button @click="orderWay='original'">原本排序</button>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: '#app',
data: {
persons: [
{id: 1, name: 'jason', age: 30},
{id: 2, name: 'mike', age: 20},
{id: 3, name: 'jay', age: 37},
{id: 4, name: 'jolin', age: 28},
],
searchName: '',
orderWay: 'original'
},
methods: {},
computed: {
filterPersons() {
let arr = this.persons.filter((p) => {
return p.name.indexOf(this.searchName) !== -1
})
return arr.sort((p1, p2) => {
if (this.orderWay == 'asc') {
return p1.age - p2.age
} else if (this.orderWay == 'desc') {
return p2.age - p1.age
}
})
}
}
})
</script>
