FE_Vue学习笔记 条件渲染[v-show v-if] 列表渲染[v-for] 列表过滤 列表排序

news2025/10/31 11:58:08

1 条件渲染 v-show v-if

使用template可以使其里面的内容在html的结构中不变。条件渲染：

  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一定可以获取到
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="conditional-rendering">
    <!-- 使用v-show做条件渲染 切换频率高-->
    <!--    <h1 v-show="judge">hello {{ name }}</h1>-->

    <!-- 使用v-if做条件渲染 切换频率低-->
    <!--    <h1 v-if="judge">hello {{ name }}</h1>-->

    <h2>当前的n值是:{{ n }}</h2>
    <button @click="n++">点我n+1</button>
    <!-- v-if和v-else-if -->
    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else-if="n === 3">Vue</div>
    <div v-else>other</div>

    <!-- v-if与template结合 -->
    <template v-if="n === 1">
        <h2>hello-zhaoshuai-lc</h2>
    </template>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: '#conditional-rendering',
        data: {
            name: 'zhaoshuai-lc@inspur.com',
            judge: false,
            n: 1
        }
    })
</script>
</body>
</html>

2 列表渲染 v-for

  1. 用于展示列表数据
  2. 语法：v-for=“(item,index) in xxx” :key=“yyy”
  3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for">
    <ul>
        <li v-for="item in personList" :key="item.id">
            {{ item.name }} - {{ item.age }}
        </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el: '#v-for',
        data: {
            personList: [
                {id: 1001, name: 'zhaoshuai-la', age: 101},
                {id: 1002, name: 'zhaoshuai-lb', age: 102},
                {id: 1003, name: 'zhaoshuai-lc', age: 103}
            ]
        }
    })
</script>
</body>
</html>

在这里插入图片描述

    <ul>
        <li v-for="(a, b) in personList">
            {{ a }} - {{ b }}
        </li>
    </ul>

在这里插入图片描述
上面的key可以做一个替换：

    <ul>
        <li v-for="(item, index) in personList" :key="index">
            {{ item.name }} - {{ item.age }}
        </li>
    </ul>

in 也可以替换为 of:

    <ul>
        <li v-for="(item, index) of personList" :key="index">
            {{ item.name }} - {{ item.age }}
        </li>
    </ul>

除了数组还可以遍历对象：

<body>
<div id="v-for">
    <ul>
        <li v-for="(value, key) of car" :key="key">
            {{ key }} - {{ value }}
        </li>
    </ul>

</div>
<script type="text/javascript">
    new Vue({
        el: '#v-for',
        data: {
            car: {
                name: '奥迪A8',
                price: '70万',
                color: '黑色'
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述
测试遍历字符串：

  <ul>
      <li v-for="(char, index) of str" :key="index">
          {{ index }} - {{ char }}
      </li>
  </ul>
str: 'hello'

在这里插入图片描述

3 这里对于列表渲染的key的原理做一个说明

<body>
<div id="v-for">
    <button @click.once="add">添加一个 zhaoshuai-ld</button>
    <ul>
        <li v-for="(item, index) of personList" :key="index">
            {{ item.name }} - {{ item.age }}
        </li>
    </ul>

</div>
<script type="text/javascript">
    new Vue({
        el: '#v-for',
        data: {
            personList: [
                {id: 1001, name: 'zhaoshuai-la', age: 101},
                {id: 1002, name: 'zhaoshuai-lb', age: 102},
                {id: 1003, name: 'zhaoshuai-lc', age: 103}
            ]
        },
        methods: {
            add() {
                let person = {id: 1004, name: 'zhaoshuai-ld', age: 104}
                this.personList.unshift(person)
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
看似没有问题，其实问题很大，如下：遍历列表时key的作用（index作为key）

<body>
<div id="v-for">
    <button @click.once="add">添加一个 zhaoshuai-ld</button>
    <ul>
        <li v-for="(item, index) of personList" :key="index">
            {{ item.name }} - {{ item.age }}
            <input type="text">
        </li>
    </ul>

</div>
<script type="text/javascript">
    new Vue({
        el: '#v-for',
        data: {
            personList: [
                {id: 1001, name: 'zhaoshuai-la', age: 101},
                {id: 1002, name: 'zhaoshuai-lb', age: 102},
                {id: 1003, name: 'zhaoshuai-lc', age: 103}
            ]
        },
        methods: {
            add() {
                let person = {id: 1004, name: 'zhaoshuai-ld', age: 104}
                this.personList.unshift(person)
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

遍历列表时key的作用（id作为key）

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

在这里插入图片描述
在这里插入图片描述

3.1 面试题：react、Vue中的key有什么作用？（key的内部原理）

  1. 虚拟DOM中key的作用：
    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
    1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
 若虚拟DOM中内容没变，直接使用之前的真实DOM
 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

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

创建新的真实DOM，随后渲染到页面
  1. 用index作为key可能会引发的问题：

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

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

4 列表过滤

4.1 用watch实现列表过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for">
    <input type="text" placeholder="请输入名字" v-model="keyWorld">
    <ul>
        <li v-for="(item, index) of filterPersonList" :key="item.id">
            {{ item.name }} - {{ item.age }}
        </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el: '#v-for',
        data: {
            keyWorld: '',
            personList: [
                {id: '001', name: '马冬梅', age: 19, sex: '女'},
                {id: '002', name: '周冬雨', age: 20, sex: '女'},
                {id: '003', name: '周杰伦', age: 21, sex: '男'},
                {id: '004', name: '温兆伦', age: 22, sex: '男'}
            ],
            filterPersonList: []
        },
        watch: {
            keyWorld: {
                immediate: true,
                handler(newValue, oldValue) {
                    this.filterPersonList = this.personList.filter((item) => {
                        return item.name.indexOf(newValue) !== -1
                    })
                }
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

4.2 用computed实现列表过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for">
    <input type="text" placeholder="请输入名字" v-model="keyWorld">
    <ul>
        <li v-for="(item, index) of filterPersonList" :key="item.id">
            {{ item.name }} - {{ item.age }}
        </li>
    </ul>

</div>
<script type="text/javascript">
    new Vue({
        el: '#v-for',
        data: {
            keyWorld: '',
            personList: [
                {id: '001', name: '马冬梅', age: 19, sex: '女'},
                {id: '002', name: '周冬雨', age: 20, sex: '女'},
                {id: '003', name: '周杰伦', age: 21, sex: '男'},
                {id: '004', name: '温兆伦', age: 22, sex: '男'}
            ]
        },
        computed: {
            filterPersonList() {
                return this.personList.filter((item) => {
                    return item.name.indexOf(this.keyWorld) !== -1
                })
            }
        }
    })
</script>
</body>
</html>

5 列表排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for">
    <input type="text" placeholder="请输入名字" v-model="keyWorld">
    <button @click="sortType = 2">升序</button>
    <button @click="sortType = 1">降序</button>
    <button @click="sortType = 0">原序</button>
    <ul>
        <li v-for="(item, index) of filterPersonList" :key="item.id">
            {{ item.name }} - {{ item.age }}
        </li>
    </ul>

</div>
<script type="text/javascript">
    new Vue({
        el: '#v-for',
        data: {
            keyWorld: '',
            sortType: 0, // 0-原顺序 1-降序 2-升序
            personList: [
                {id: '001', name: '马冬梅', age: 19, sex: '女'},
                {id: '002', name: '周冬雨', age: 24, sex: '女'},
                {id: '003', name: '周杰伦', age: 55, sex: '男'},
                {id: '004', name: '温兆伦', age: 12, sex: '男'}
            ]
        },
        computed: {
            filterPersonList() {
                let filterList = this.personList.filter((item) => {
                    return item.name.indexOf(this.keyWorld) !== -1
                })
                // 判断是否需要排序
                if (this.sortType) {
                    filterList.sort((a, b) => {
                        return this.sortType === 1 ? b.age - a.age : a.age - b.age
                    })
                }
                return filterList
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/517920.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

rem、px、em的区别 -前端

rem、px、em的区别 -前端

文章目录 三者的区别特点与换算举例emrem 总结一总结二 三者的区别 在css中单位长度用的最多的是px、em、rem&#xff0c;这三个的区别是&#xff1a; 一、px是固定的像素&#xff0c;一旦设置了就无法因为适应页面大小而改变。 二、em和rem相对于px更具有灵活性&#xff0c;…
阅读更多...
消息认证码以及数字签名的认识

消息认证码以及数字签名的认识

文章目录 消息认证码及数字签名1. 消息认证码1.1 消息认证1.2 消息认证码的使用步骤1.3 go中对消息认证码的使用1.4 消息认证码的问题 2.数字签名2.1 数字签名的生成和验证2.2 数字签名的流程2.3 Go使用RSA进行数字签名2.4 Go使用椭圆曲线进行数字签名2.5 数字签名无法解决的问…
阅读更多...
dts pinctrl初始gpio0方法

dts pinctrl初始gpio0方法

1、在pinctrl-rockchip.c文件中添加头文件 #include <linux/of_gpio.h> 如下 2、 在如下函数添加红色代码 static int rockchip_pinctrl_probe(struct platform_device *pdev) { struct rockchip_pinctrl *info; struct device *dev &pdev->dev; …
阅读更多...
Vue3 自定义指令让元素自适应高度，el-table在可视区域内滚起来

Vue3 自定义指令让元素自适应高度，el-table在可视区域内滚起来

我始终坚持&#xff0c;前端开发不能满足于实现功能&#xff0c;而是需要提供优秀的交互与用户体验。即使没有产品没有UI的小项目&#xff0c;也可以自己控制出品质量&#xff0c;做到小而美。所以前端们不仅仅需要了解框架如何用&#xff0c;还要学习一些设计、交互、体验的知…
阅读更多...
新入职了一个00后卷王，天天加班12点，太让人崩溃......

新入职了一个00后卷王，天天加班12点，太让人崩溃......

在程序员职场上&#xff0c;什么样的人最让人反感呢? 是技术不好的人吗?并不是。技术不好的同事&#xff0c;我们可以帮他。 是技术太强的人吗?也不是。技术很强的同事&#xff0c;可遇不可求&#xff0c;向他学习还来不及呢。 真正让人反感的&#xff0c;是技术平平&…
阅读更多...
Android 百度地图SDK闪退

Android 百度地图SDK闪退

Android 百度地图SDK闪退 通过Android IDE查看APP运行日志Error 1:errorcode: 230 uid: -1 appid -1 msg: APP Mcode码校验失败 在调用百度SDK时出现闪退现象&#xff0c;要知道闪退的具体原因&#xff0c;不然搜了一堆教程&#xff0c;发现纯纯浪费时间&#xff0c;作者也是痛…
阅读更多...
知识就是力量，图谱路在何方 | ChatGPT冲击下，招商银行如何“抢救”知识图谱？

知识就是力量，图谱路在何方 | ChatGPT冲击下，招商银行如何“抢救”知识图谱？

“知识就是力量”我们耳熟能详&#xff0c;但培根的这句话其实还有后半句“更重要的是运用知识的技能”。对于人工智能来说&#xff0c;知识图谱就是其如何对知识进行运用的技能体现。在金融领域&#xff0c;如何运用这一技能更好地理解客户需求&#xff0c;提高业务效率和客户…
阅读更多...
三层架构与MVC架构区别

三层架构与MVC架构区别

三层架构 表示层&#xff1a;主要对用户的请求接受&#xff0c;以及数据的返回&#xff0c;为客户端提供应用程序的访问。 servlet层 业务逻辑层&#xff1a;对我们数据实现业务逻辑的封装 service层 数据访问层&#xff1a;对数据库访问操作 dao层 MVC架构 1.MVC全名是Model …
阅读更多...
MATLAB 常用数学函数和数组和字符串、元胞数组和结构体，MATLAB 编程，关系运算符和逻辑变量

MATLAB 常用数学函数和数组和字符串、元胞数组和结构体，MATLAB 编程，关系运算符和逻辑变量

目录 MATLAB 零基础学习 简介 使用平台 一、MATLAB 界面 二、基础操作 使用方法 常用数学函数 初等函数 三角函数 指数和对数 复数 标点符号 常用操作 三、文件类型 数组 一、数组基础知识 二、数组创建与操作 创建 数组操作 字符串数组 字符串、元胞数组…
阅读更多...
语义分割学习笔记（三）FCN网络结构详解

语义分割学习笔记（三）FCN网络结构详解

1.FCN网络概述 FCN网络&#xff08;Fully Convolutional Networks&#xff09;&#xff1a;首个端对端的针对像素级预测的全卷积网络。 FCN网络思想&#xff1a;输入图像经过多次卷积&#xff0c;得到一个通道数为21的特征图&#xff0c;再经过上采样&#xff0c;得到一个与原图…
阅读更多...
如何在 Mac 或 Windows 上将 PDF 转换为 Word 而不丢失格式

如何在 Mac 或 Windows 上将 PDF 转换为 Word 而不丢失格式

PDF 有无数的优点&#xff0c;但它不能像 Microsoft Word 文档那样容易编辑。如果您没有价格总是很高的 PDF 编辑器&#xff0c;您将无法根据需要编辑或使用 PDF 源。但是我们可以将PDF转成Word&#xff0c;方便编辑。 有很多解决方案可用于在 Mac 上将 PDF 转换为可编辑的 W…
阅读更多...
纯手动搭建大数据集群架构_记录019_集群机器硬盘爆满了_从搭建虚拟机开始_做个200G的虚拟机---大数据之Hadoop3.x工作笔记0179

纯手动搭建大数据集群架构_记录019_集群机器硬盘爆满了_从搭建虚拟机开始_做个200G的虚拟机---大数据之Hadoop3.x工作笔记0179

今天突然就发现,使用nifi的时候集群满了...气死了.. 而在vmware中给centos去扩容,给根目录扩容,做的时候,弄了一天...最后还是报错, 算了从头搭建一个200G的,希望这次够用吧.后面再研究一下扩容的问题. 2023-05-12 11:06:48 原来的集群的机器,硬盘太小了,扩容不知道怎么回事…
阅读更多...
GBASE核心业务系统解决方案入围工信部“2022年信息技术应用创新典型解决方案”

GBASE核心业务系统解决方案入围工信部“2022年信息技术应用创新典型解决方案”

日前&#xff0c;以“加快数字中国建设&#xff0c;推进中国式现代化”为主题的第六届数字中国建设峰会在福州盛大召开。作为本届峰会的一大看点&#xff0c;由工业和信息化部网络安全产业发展中心(工业和信息化部信息中心)牵头开展的2022年信息技术应用创新解决方案&#xff0…
阅读更多...
利用ChatGPT变现有哪些方法？

利用ChatGPT变现有哪些方法？

ChatGPT是一个聊天机器人&#xff0c;它可以用于多种用途&#xff0c;例如&#xff1a; 1. 在网站或应用程序中提供客户支持&#xff1a;ChatGPT可以用于回答常见问题、提供技术支持或解决客户问题。这可以提高客户满意度&#xff0c;从而增加客户忠诚度和销售额。 2. 在社交…
阅读更多...
Windows 事件日志审核

Windows 事件日志审核

大多数关于 IT 安全最佳实践的文章都有一个共同的建议&#xff1a;企业应定期审核其日志数据。这尤其适用于 Windows 审核日志&#xff0c;因为它们携带有价值的安全信息。除了增强安全性之外&#xff0c;定期日志审核是满足合规性法规的重要组成部分。 许多组织都享受到了通过…
阅读更多...
【企业信息化】第7集 免费开源ERP: Odoo 16 Maintenance设备与维护保养管理

【企业信息化】第7集 免费开源ERP: Odoo 16 Maintenance设备与维护保养管理

文章目录 前言一、概览二、使用功能1.自动化、预防性维护2.组织您的维护请求3.提高设备总体效率4.仪表板&统计5.与其他Odoo应用程序完全集成 总结 前言 为现代化制造商&#xff0c;维护软件。 一、概览 二、使用功能 1.自动化、预防性维护 以保证您的在线运行。 Odoo 计…
阅读更多...
Selenium3.0基础 —— 自动化测试概述

Selenium3.0基础 —— 自动化测试概述

软件测试六大模块&#xff1a; 1、功能性测试&#xff1a; ATM机取钱不扣款。日期格式不正确。web页面的超链接无法打开。手机正在听音乐时来电不提示。地铁公交卡刷卡扣款不成功。手机APP无法正常启动注册。手机拨号后无法接通对方手机。 2、可用性测试&#xff08;用户体验…
阅读更多...
了解Gradle：轻松构建优秀的Java和Android应用程序

了解Gradle：轻松构建优秀的Java和Android应用程序

Gradle是什么 Gradle是一种基于Apache Maven和 Apache Ant的自动化构建工具&#xff0c;用于Java和Android应用程序的构建、测试和部署。它使用声明性构建语法&#xff08;DSL&#xff09;来定义项目和任务&#xff0c;并使得构建更容易&#xff0c;更快速和更灵活。相比于Mav…
阅读更多...
使用 Kotlin 委托，拆分比较复杂的 ViewModel

使用 Kotlin 委托，拆分比较复杂的 ViewModel

需求背景 在实际的开发场景中&#xff0c;一个页面的数据&#xff0c;可能是由多个业务的数据来组成的。使用 MVVM 架构进行实现&#xff0c;在 ViewModel 中存放和处理多个业务的数据&#xff0c;通知 View 层刷新 UI。 传统实现 比如上面的例子&#xff0c;页面由3 个模块数…
阅读更多...
Javascript学习- DOM获取属性操作

Javascript学习- DOM获取属性操作

Web API 基本认知 作用和分类 作用: 就是使用 JS 去操作 html 和浏览器分类:DOM (文档对象模型)、BOM(浏览器对象模型) 什么是DOM DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API 白话文:DOM是浏览器提供的一套专门用来操作网…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023