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起使用， 但要求结构不能被“打断”。

只有当该条件返回值为真时才能进行渲染

小嘎鱼学Vue!

2.v-show写法: v-show=" 表达式”

适用于:切换频率较高的场景。

特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

1. 注意:使用v-if的时，元素可能无法获取到，而使用v-show必定可以获取到。

{name}}社区
欢迎加入{{name}}社区
 -->{name}}社区  -->
当前值为{{n}}
点我n+1
n为1我就出来
n为2我就出来
n为3我就出来
n为4我就出来
n为5我就出来
我就出来

2.列表渲染

v-for指令:

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

1.用于展示列表数据

2.语法: v-for=" (item, index) in xx

3可遍历:数组、对象、字符串、指定次数(后两个用的比较少)

 
学生信息
{{p.name}}-{{p.age}}岁----{{index}}
汽车信息
{{value}}---{{keys}}
遍历字符串
{{value}}---{{keys}}
遍历指定次数
{{value}}---{{keys}}

2.1v-for与对象

1.可以使用 v-for 来遍历一个对象的所有属性，遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

{{ value }}

data() {return {myObject: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'}}
}

2.可以通过提供第二个参数表示属性名 (例如 key)：

{{ key }}: {{ value }}

1. 第三个参数表示位置索引

{{ index }}. {{ key }}: {{ value }}

3.key的作用

3.1列表过滤

这里可以使用侦听器实现也可以使用计算属性实现，但是一般都是使用计算属性更简单一些

人员列表
{{p.name}}-{{p.age}}-{{p.sex}}

3.2列表排序

列表排序是从列表过滤基础上添加的

人员列表
升序降序原序
{{p.name}}-{{p.age}}-{{p.sex}}

3.3vue.set的使用

vue.set的三个参数分别是（给谁添加，添加什么，添加的值是啥）

使用$set也可以实现该功能

局限性：在这里set方法只能给Vue实例对象里面的data内的对象添加属性，不可以直接给data添加属性

3.4数组检测

Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法

包括:

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

点赞：您的赞赏是我前进的动力！👍
收藏：您的支持我是创作的源泉！⭐
评论：您的建议是我改进的良药！✍
山鱼的个人社区：欢迎大家加入我的个人社区——山鱼社区如果对你有帮助的话希望三连下