Vue的渲染分为条件渲染和列表渲染，那究竟什么式渲染呢?
1.条件渲染
1.v-if写法:(1)v-if="表达式"(2)v-else-if="表达式"(3)v-else="表达式"（和我们曾经学过的JavaScript里面的if语句几乎一样）
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意: v-if可以和:v-else-if、 v-else起使用， 但要求结构不能被“打断”。
只有当该条件返回值为真时才能进行渲染
<h1 v-if="Padme">小嘎鱼学Vue!</h1>
2.v-show写法: v-show=" 表达式”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
注意:使用v-if的时，元素可能无法获取到，而使用v-show必定可以获取到。
<body>
<div class="user">
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show = 'pand'>欢迎加入{{name}}社区</h2>
<h2 v-show = '1 === 2'>欢迎加入{{name}}社区</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if = 'null'>欢迎加入{{name}}社区</h2> -->
<h1>当前值为{{n}}</h1>
<button @click = 'n++'>点我n+1</button>
<div v-show = 'n ===1'>n为1我就出来</div>
<div v-show = 'n ===2'>n为2我就出来</div>
<div v-show = 'n ===3'>n为3我就出来</div>
<!-- v-if，v-else-if，v-else必须紧挨着 -->
<div v-if = 'n ===4'>n为4我就出来</div>
<div v-else-if = 'n ===5'>n为5我就出来</div>
<div v-else>我就出来</div>
<!-- template模板标签只能使用v-if -->
<template v-if = 'n === 1'>
<h1>你好</h1>
<h1>你好好</h1>
<h1>你好好好</h1>
</template>
</div>
<script>
const vm = new Vue({
el: '.user',
data:{
name: 'Aic山鱼',
pand:false,
n:0
}
})
</script>
</body>
2.列表渲染
v-for指令:
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：
1.用于展示列表数据
2.语法: v-for=" (item, index) in xx
3可遍历:数组、对象、字符串、指定次数(后两个用的比较少)
<div id="user">
<ul>
<!-- v-for这里可以写俩参数接受值,key代表唯一表示 -->
<!-- 遍历数组 -->
<h2>学生信息</h2>
<li v-for='(p,index) in persons' :key="index">{{p.name}}-{{p.age}}岁----{{index}}</li>
</ul>
<ul>
<!-- 遍历对象 -->
<h2>汽车信息</h2>
<li v-for='(value,keys) in car'>{{value}}---{{keys}}</li>
</ul>
<ul>
<!-- 遍历字符串 -->
<h2>遍历字符串</h2>
<li v-for='(value,keys) in str'>{{value}}---{{keys}}</li>
<!-- 遍历指定次数 -->
<h2>遍历指定次数</h2>
<li v-for='(value,keys) of 5'>{{value}}---{{keys}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#user',
data: {
persons: [
{ id: 001, name: '山鱼', age: 18 },
{ id: 002, name: '龙猫', age: 19 },
{ id: 003, name: '飞飞', age: 20 }
],
car: {
name: '宝马',
numbers: '25W',
type: 'sr1000rr'
},
str:'I-LOVE-YOU'
}
})
</script>
2.1v-for与对象
1.可以使用 v-for 来遍历一个对象的所有属性，遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
<ul>
<li v-for="value in myObject">
{{ value }}
</li>
</ul>
data() {
return {
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
}
2.可以通过提供第二个参数表示属性名 (例如 key)：
<li v-for="(value, key) in myObject">
{{ key }}: {{ value }}
</li>
第三个参数表示位置索引
<li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>
3.key的作用
3.1列表过滤
这里可以使用侦听器实现也可以使用计算属性实现，但是一般都是使用计算属性更简单一些
<body>
<div id="user">
<h1>人员列表</h1>
<input type="text" name="" id="" placeholder="输入搜索" v-model='keyWord'>
<ul>
<li v-for='p of filpersons' :key='p.id'>{{p.name}}-{{p.age}}-{{p.sex}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#user',
data: {
// 1.收集用户的输入2.
keyWord: '',
persons: [
{ id: '001', name: '马冬梅', age: 18, sex: '女' },
{ id: '002', name: '周冬雨', age: 19, sex: '女' },
{ id: '003', name: '周杰伦', age: 20, sex: '男' },
{ id: '004', name: '温兆伦', age: 20, sex: '男' },
]
},
computed: {
filpersons() {
return this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1;
})
}
}
})
</script>
3.2列表排序
列表排序是从列表过滤基础上添加的
<body>
<div id="user">
<h1>人员列表</h1>
<button @click='sortType = 1'>升序</button>
<button @click='sortType = 2'>降序</button>
<button @click='sortType = 0'>原序</button>
<input type="text" name="" id="" placeholder="输入搜索" v-model='keyWord'>
<ul>
<li v-for='p of filpersons' :key='p.id'>{{p.name}}-{{p.age}}-{{p.sex}}</li>
</ul>
</div>
<script>
// 使用计算属性实现列表过滤
const vm = new Vue({
el: '#user',
data: {
// 1.收集用户的输入2.
keyWord: '',
sortType: 0,// 0代表原顺序，1代表升序，2代表降序
persons: [
{ id: '001', name: '马冬梅', age: 18, sex: '女' },
{ id: '002', name: '周冬雨', age: 19, sex: '女' },
{ id: '003', name: '周杰伦', age: 20, sex: '男' },
{ id: '004', name: '温兆伦', age: 20, sex: '男' },
]
},
computed: {
filpersons() {
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1;
})
if (this.sortType) {
arr.sort((p1, p2) => {
return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
})
}
return arr;
}
}
})
var arr = [1, 2, 3, 4];
arr.sort((p1, p2) => {
return this.sortType === 1 ? p2 - p1 : p1 - p2
})
</script>
</body>
3.3vue.set的使用
vue.set的三个参数分别是（给谁添加，添加什么，添加的值是啥）
使用$set也可以实现该功能
局限性：在这里set方法只能给Vue实例对象里面的data内的对象添加属性，不可以直接给data添加属性
3.4数组检测
Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法
包括:
点赞：您的赞赏是我前进的动力！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
