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将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法
包括:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
点赞：您的赞赏是我前进的动力！ 👍
收藏：您的支持我是创作的源泉！ ⭐
评论：您的建议是我改进的良药！ ✍
山鱼的个人社区：欢迎大家加入我的个人社区—— 山鱼社区 如果对你有帮助的话希望三连下
转载：https://blog.csdn.net/zhaochen1127/article/details/128572932
查看评论