【学vue跟玩一样】快速搞懂vue渲染

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必定可以获取到。

    

        
        
        
        
        
当前值为{{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()

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