(6) vue 条件和列表渲染
原创
©著作权归作者所有:来自51CTO博客作者富坚老贼的原创作品,请联系作者获取转载授权,否则将追究法律责任
一、条件渲染
1. v-if
<div id="vm">
<!--awesome为真时显示此句-->
<h1 v-if="awesome">Vue is awesome!</h1>
<!--awesome为假时显示此句-->
<h1 v-else>Oh no 😢</h1>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
awesome:false
}
})
</script>
2.v-else-if
<div id="vm">
<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>
<script>
var vm = new Vue({
el: '#vm',
data: {
type:'D'
}
})
</script>
3.在模板元素上使用v-if
4.key管理可复用元素
5.v-show
<h1 v-show="ok">Hello!</h1>
和v-if一样的效果,但v-show 只是简单地切换元素的 CSS 属性display.
v-show不支持模板
二、列表渲染
1.v-for
<div id="vm">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
items: [
{ message: 'Tom' },
{ message: 'Jan' }
]
}
})
</script>
直接使用整数
<div id="vm">
<ul>
<li v-for="n in 10">{{ n }}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#vm'
})
</script>
2.可选参数
v-for 的第二个参数为可选参数,当前表示索引
<div id="vm">
<ul>
<li v-for="(item,index) in items">
{{ item.message}},{{index}}
</li>
</ul>
</div>
3.使用对象
其中第二个参数表示索引名称
<div id="vm">
<ul>
<li v-for="(item,index) in Student">
{{ item}},{{index}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
Student: {
Name: 'Tom',
age: 20
}
}
})
</script>
第三个参数表示索引数字
<div id="vm">
<ul>
<li v-for="(item,index1,index2) in Student">
{{ item}},{{index1}},{{index2}}
</li>
</ul>
</div>
4.状态维护
???
5.数组更新
(1)这几个方法可以触发视图更新
-
push()
-
pop()
-
shift()
-
unshift()
-
splice()
-
sort()
-
reverse()
根据1.的代码测试
vm.items.push({ message: 'Baz' })
(2)替换数组
?
6.vue里添加响应式的变量
默认vue创建以后的变量不是响应式的。可以使用
目录3.的代码,控制台输入
Vue.set(vm.Student, 'sex', '男')
7.显示过滤、排序结果
<div id="vm">
<ul>
<li v-for="n in evenNumbers">{{ n }}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})
</script>
在计算属性不适用的情况下
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
8.组件上使用v-for
?