Vue条件渲染与列表渲染

2024-12-21 07:38:32

一、Vue条件渲染

v-show

    <!--使用v-show做条件渲染-->
    <h1 v-show="false">{{name}}</h1>
    <!--或-->
    <h1 v-show="1===3">{{name}}</h1>

举例1

<div id="root">
    <h2>当前n值是{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <div v-show="n===1">2020</div>
    <div v-show="n===2">2021</div>
    <div v-show="n===3">2022</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            name: "你好",
            n: 0
        }
    })
</script>

v-if

    <!--使用v-if做条件渲染-->
    <h1 v-if="false">{{name}}</h1>
    <h1 v-if="1===1">{{name}}</h1>

如果切换频率高用 v-show，切换频率低用 v-if

v-else-if

举例2

<div id="root">
    <h2>当前n值是{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <div v-if="n===1">2020</div>
    <div v-else-if="n===1">2021</div>
    <div v-else-if="n===3">2022</div>
</div>

可以看到 v-if、v-else-if 的逻辑和 if-else if 的逻辑是相同的，一个符合下边的代码就不执行了

v-else

<div id="root">
    <h2>当前n值是{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <div v-if="n===1">2020</div>
    <div v-else-if="n===1">2021</div>
    <div v-else-if="n===2">2022</div>
    <div v-else>某年</div>
</div>

v-if 与 template

<div id="root">
    <h2>当前n值是{{n}}</h2>
    <button @click="n++">点我n+1</button>
    <template v-if="n===1">
        <h2>2020</h2>
        <h2>2021</h2>
        <h2>2022</h2>
    </template>
</div>

小结

条件渲染

1、v-if

写法：

(1).v-if="表达式”

(2).v-else-if="表达式"

(3).v-else="表达式"

适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意: v-if可以和v-else-if、v-else一起使用，但要求结构不能被"打断”

2、v-show

写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注:

用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

二、列表渲染

v-show

基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初识</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--遍历数组-->
    <h2>人员列表(遍历数组)</h2>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}}--{{p.age}}
        </li>
    </ul>
    <!--遍历对象-->
    <h2>猫咪信息(遍历对象)</h2>
    <ul>
        <li v-for="(value,k) in cat" :key="k">
            {{k}}:{{value}}
        </li>
    </ul>
    <!--遍历字符串-->
    <h2>遍历字符串(用的少)</h2>
    <ul>
        <li v-for="(char,index) in str" :key="k">
            {{char}}-{{index}}
        </li>
    </ul>
    <!--遍历指定次数-->
    <h2>遍历指定次数(用的少)</h2>
    <ul>
        <li v-for="(index,number) in 5" :key="index">
            {{index}}-{{number}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            persons:[
                {id:1,name:"张三",age:18},
                {id:2,name:"李四",age:19},
                {id:3,name:"王五",age:20},
            ],
            cat:{
                name:"王大喵",
                age:2,
                color:"灰色"
            },
            str:"hello"
        }
    })
</script>
</body>
</html>

v-for指令

1、用于展示列表数据
2、语法：v-for="(item，index) in xxx" :key="yyy"
3、可遍历：数组、对象、字符串（用的很少)、指定次数（用的很少)

key的作用

如果用 index 做 key，循环遍历 persons，同时在后边增加 input，内容复制展示的信息，然后增加一个按钮，点击在列表前增加一个老刘

<div id="root">
    <!--遍历数组-->
    <h2>人员列表(遍历数组)</h2>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}}--{{p.age}}
            <input type="text"/>
        </li>
    </ul>
    <button @click="add">增加一个老刘</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            persons:[
                {id:1,name:"张三",age:18},
                {id:2,name:"李四",age:19},
                {id:3,name:"王五",age:20},
            ]
        },
        methods:{
            add(){
                const p = {id:4,name:"老刘",age:40}
                this.persons.unshift(p)
            }
        }
    })
</script>

错乱原因：

当 id 做为 key

<ul>
        <li v-for="(p,index) in persons" :key="p.id">
            {{p.name}}--{{p.age}}
            <input type="text"/>
        </li>
    </ul>

react、vue中的key有什么作用?（key的内部原理)

1、虚拟DOM中key的作用

key 是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DON】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2、对比规则

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

①若虚拟DOM中内容没变直，接使用之前的真实DOM
②若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DON

(2).旧虚拟DOM中未找到与新虚拟DOM相同的 key：

创建新的真实DOM，随后渲染到到页面

3、用index作为key可能会引发的问题

(1).对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新(界面效果没问题，但效率低）
(2).如果结构中还包含输入类的DOM，会产生错误DOM更新（界面有问题）

4、开发中如何选择key?

(1).最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
(2).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示,使用index作为key是没有问题的

到此这篇关于Vue条件渲染与列表渲染的文章就介绍到这了,更多相关Vue渲染内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue基础教程之条件渲染和列表渲染

目录前言 1.1 作用 1.2 控制元素显隐的方式 1.3 初始渲染对比 1.4 切换消耗对比 1.5 使用场景对比 1.6 其他 2 v-if 和 v-for 2.1 v-if 和 v-for 不能同时用的原因 2.2 v-if 和 v-for 一起用的解决方案 3 列表渲染的 key 有什么用总结前言什么是条件渲染?在我们的页面中会有很多这样的应用场景,比如说我们今天要上架一个活动,这个活动页面只在今天有效,在晚上的24点或者说在明天早上凌晨0点1秒的时候就要把这个页面下下来,把这个
浅析Vue.js 中的条件渲染指令

1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> <p v-if="type===1">拌面</p> <p v-else-if="type===2">扁肉</p> <p v-else="type===3">其它</p> </div
Vue的列表之渲染,排序,过滤详解

目录 1.列表(渲染.排序.过滤) 1.1条件渲染指令 1.1.1v-show 1.1.2v-if 1.1.3v-if和v-show的小案例 1.1.4v-for(key的原理) 1.2列表过滤 1.3列表排序总结 1. 列表(渲染.排序.过滤) 1.1 条件渲染指令有个小技巧: 如果是查找对象中不存在的属性,返回的是一个undefined,利用这一个点不管是v-show或者是v-if,如果值等于undefined的就不显示,假设sex属性不存在 <p v-show="studen
vue 条件渲染v-if和v-show

目录 1.v-if 2.在<template>上使用v-if 3.用key管理可复用的元素 4.v-show 4.1v-if对比v-show 1.v-if 在模板中,可以根据条件进行渲染.条件用到的是v-if.v-else-if以及v-else来组合实现的. 示例代码如下: <div id="app"> <p v-if="weather == 'sun'">今天去公园玩!</p> <p v-else-if=&qu
详解Vue的列表渲染

目录 1. v-for:遍历数组内容(常用) 2. v-for:遍历对象属性(常用) 3.遍历字符串(不常用) 4.遍历指定次数(不常用) 5.key 的作用和原理 1.虚拟DOM中key的作用: 2.对比规则: 3.用index作为key可能会引发的问题: 4.开发中如何选择key? 总结 1. v-for:遍历数组内容(常用) in 也可以用 of 代替 <body> <div id="div1"> <li v-for='(p,i) in person
深入理解Vue 的条件渲染和列表渲染

这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记. 条件渲染 v-if 在 < template > 中配合 v-if 渲染一整组在使用 v-if 控制元素的时候,我们需要将它添加到这个元素上去.然而如果要切换很多元素的时候,一个个的添加就太麻烦了.这时候就可以使用 < template > 将一组元素进行包裹,并在上面使用 v-if.最终的渲染结果不会包含 < template > 元素. <template
vue中v-for指令完成列表渲染

目录 1.列表遍历 2.Vue中key的作用 3.列表过滤本文就Vue中列表渲染做个简单总结和使用演示: 列表渲染是用v-for指令根据绑定一组元素的选项来完成的,渲染格式可以自定义. 1.列表遍历最基本的使用案例1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
Vue条件渲染与列表渲染

目录一.Vue条件渲染 v-show v-if v-else-if v-else v-if 与 template 小结二.列表渲染 v-show key的作用 1.虚拟DOM中key的作用 2.对比规则 3.用index作为key可能会引发的问题 4.开发中如何选择key? react.vue中的key有什么作用?(key的内部原理) 一.Vue条件渲染 v-show  <h1 v-show="false">{{nam
详解key在Vue列表渲染时究竟起到了什么作用

Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点.而通常在我们使用v-for这个指令的时候,Vue会要求你给循环列表的每一项添加唯一的key,那么这个key在渲染列表时究竟起到了什么作用呢? 在解释这一点之前,你最好已经了解Vue的diff算法的具体原理是什么. Vue2更新真实DOM的操作主要是两种:创建新DOM节点并移除旧DOM节点和更新已存在的DOM节点,这两种方式里创建新DOM节点的开销肯定是远大于更新或移动已有的DOM节点,所以在diff中逻辑都是为了减少新的创建
简单理解Vue条件渲染

一.v-if显示单个元素注意else只能跟在v-if或者v-show后面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue条件渲染</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-sca
Vue.js学习教程之列表渲染详解

本文主要给大家介绍了关于Vue.js列表渲染的相关资料,分享出来给大家参考学习,下面来看看详细的介绍: v-for 可以使用 v-for 指令基于一个数组渲染一个列表.这个指令使用特殊的语法,形式为item in items,items 是数据数组,item 是当前数组元素的别名: 示例: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li>
Vue列表渲染的示例代码

用v-for把一个数组对应为一个组件元素我们用v-for指令根据一组数组的选项列表进行渲染.v-for指令需要使用item in items形式的语法: <ul> <li v-for="item in items"> {{ item.message }} </li> </ul> var vm = new Vue({ el: '#el', data: { items: [ {message: 'foo'}, {message: 'boar
深入浅析Vue.js 中的 v-for 列表渲染指令

1 基本用法当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for. 它的表达式需要结合 in 来使用,类似 item in items 的形式. 1.1 遍历数组 html: <div id="app"> <ul> <li v-for="n in news">{{n.title}}</li> </ul> </div> js: <script> var a
vue从后台渲染文章列表以及根据id跳转文章详情详解

前言: vue里面怎样从后台渲染列表,怎么根据文章的id获取文章的具体内容.以及值与值之间的传递,vue-router 里query和params的区别及使用. 一.query和params 先来看看query和params是怎样传值和接收参数的吧!后面会用到的哦! (1)query方式传参和接收参数 query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数传递参数:把数据发送出去 this.$router.push({ path:'/aaa/bbb/ccc', query:{ i
Vue前端高效开发之列表渲染指令

v-for指令说起列表不得不提起循环,v-for指令便是可以在vue中实现循环的操作. v-for指令是基于一个数组来重复渲染的指令,通常就用于显示列表和表格. 语法: <ul v-for="(键,值,索引) in 数组"> <li>{{索引}}:{{值}}:{{键}}</li> </ul> 例: <body> <style> * { margin: 0px; padding: 0px; } ul { list