Vue2(三):绑定样式、条件渲染(v-if,v-show)、列表渲染(v-for)、key的原理、列表过滤、列表排序

一、绑定样式

1.绑定class样式

(1)字符串写法

适用于:样式类名不确定,需要动态获取。

 <div id="root"><div class="basic" :class="mood" @click="changeMood">test</div><!-- class是原本的,:class是在绑定事件,去vue那里找mood --></div><script type="text/javascript">new Vue({el:'#root',data:{mood:'normal'},methods:{changeMood(){this.mood="happy"}}})

点击盒子之后从normal到happy,但是sad没用上啊

methods:{changeMood(){const arr=['happy','normal','sad']const i=Math.floor(Math.random()*3)//    Math.random()里面不用填(0,1),就是生成[0,1)的数,*3[0,3)this.mood=arr[i]}}

把三种心情装数组里随机生成

(2)数组写法

 数组写法适用于:要绑定样式个数和名字都不确定

 <div class="basic" :class="arr"></div></div><script type="text/javascript">new Vue({el:'#root',data:{mood:'normal',arr:['a1','a2','a3']},

(3)对象写法

适用于:要绑定样式个数和名字都确定,要动态决定。

<div id="root"><div class="basic" :class="obj"></div></div><script type="text/javascript">new Vue({el:'#root',data:{mood:'normal',obj:{a1:false,a2:true}},

2.绑定style样式(用的不多)

(1)对象写法

<div id="root"><div class="basic" :style="styleObj">hh</div></div><script type="text/javascript">new Vue({el:'#root',data:{styleObj:{fontSize:'40px',color:'red'//这里面:前面的都得是存在的东西,不能随便写}},

(2)数组写法(比较少用)

<div id="root"><div class="basic" :style="[styleObj,styleObj2]">hh</div></div><script type="text/javascript">new Vue({el:'#root',data:{mood:'normal',styleObj:{fontSize:'40px'},styleObj2:{color:'red'}},

二、条件渲染

1.v-show

适用于:切换频率较高的场景。(不会动DOM树,只是隐藏,相当于添加display:none)
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。这是因为v-if会一不小心把标签直接从页面上干掉,而v-show不会干掉,只会隐藏。

<div id="root"><h3 v-show="a">欢迎来到{{name}}</h3><!-- v-show:false==display:none --></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{name:'尚硅谷',a:false}

2.v-if(结构都给干掉了)

(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else(后面不跟条件
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”,几个div连着一起写。

<div id="root"><h3>当前的n值为:{{n}}</h3><button @click="n++">点我n++</button><div v-if="n===1">1</div><div v-else-if="n===2">2</div><!-- 只能成立一个,直接跳出循环,但是好多if叠在一起不一定只能同时成立一个 --><div v-else>3</div></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{n:1},

实现点击按钮n++,n=1跳出1,等于2跳出2,等于其他跳出3

template只能配合v-if使用,可以把很多h2包起来一起实现,不破坏结构(想要n===1时跳出三个h2)

三、列表渲染!!!

1.v-for

遍历数组:

只要用遍历去生成了多个相同的结构必须得设置key去区分

一个形参:
<div id="root"><ul><h2>人员列表</h2><li v-for="p in person" :key="p.id">{{p.name}}-{{p.age}}<!-- p不用去下边找,也可以是形参 --></li><!-- 让vue来做遍历 --></ul></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{person:[{id:'001',name:'张三',age:'18'},{id:'002',name:'李斯',age:'19'},{id:'003',name:'王五',age:'17'}]},
多个形参:
<li v-for="(p,index) in person" :key="index">{{p}}-{{index}}<!-- p不用去下边找,也可以是形参 --></li>

遍历对象:

<ul><h2>汽车列表</h2><li v-for="(value,k) in car" :key="k">{{k}}-{{value}}</li></ul></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{car:{name:'奥迪',value:'80万'}}//name-奥迪value-80万

2.key的作用与原理!!!

面试题:key在vue中写了怎么处理?写了用什么值比较好?react、vue中的key有什么作用?(key的内部原理)

1、 虚拟DOM中key的作用:
key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较(diff算法),比较规则如下:

2、对比规则:
(1)旧虚拟DOM中找到了与新虚拟DOM相同的key:
① 若虚拟DOM中内容没变, 直接使用之前的真实DOM!
② 若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
(2)旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的真实DOM,随后渲染到到页面。

3、 用index作为key可能会引发的问题:
(1)若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 => 界面效果没问题, 但效率低。
(2) 如果结构中还包含输入类的DOM:
会产生错误DOM更新 => 界面有问题。

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

key相当于人的身份证号,如果没有写key,默认就是index

当我们把老刘添加到第一位

methods: {add() {const p = { id: 004, name: '老刘', age: 90 };this.persons.unshift(p);}},

这个图中,以前的虚拟dom转换成过真实dom,生成新的虚拟dom之后,就和旧的进行对比,首先对比key=0的,发现新的是老刘,旧的是张三不一样,但是后面input框是一样的(输入的数据存在的真实dom中,虚拟的都是text input框),而且旧的input框生成过真实dom了就直接拿下来input,老刘是新的直接下来,导致老刘后面是张三的框,到了王五那里,旧的没有key=3,所以王五和王五的新框都直接下来(所以王五的input是新的)

这个就是用index当key出现了错误,而且效率低,张三、李四、王五都是上边掉下来的都没复用

四、列表过滤-模糊搜索

1.数据监视实现

 <div id="root"><ul><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model=keywords><li v-for="p in fliperson" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{keywords:'',person:[{id:'001',name:'周冬雨',age:'18',sex:'女'},{id:'002',name:'马冬梅',age:'19',sex:'女'},{id:'003',name:'周杰伦',age:'17',sex:'男'},{id:'004',name:'王伦',age:'17',sex:'男'}],fliperson:[]},watch:{keywords:{immediate:true,//没输入就是空串,打开就自动运行了handler(newValue){this.fliperson=this.person.filter((p)=>{// return p.name包含valreturn p.name.indexOf(newValue)!==-1})}}}})</script>

2.computed实现

计算属性拿不到用户输入的东西val

<div id="root"><ul><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model=keywords><li v-for="p in filperson" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{keywords:'',person:[{id:'001',name:'周冬雨',age:'18',sex:'女'},{id:'002',name:'马冬梅',age:'19',sex:'女'},{id:'003',name:'周杰伦',age:'17',sex:'男'},{id:'004',name:'王伦',age:'17',sex:'男'}],},computed:{filperson(){return this.person.filter((p) => {return p.name.indexOf(this.keywords)!==-1;})}}})</script>

下去得好好看一下,好多方法都忘了

五、列表排序

每次点击sortType,计算属性都重新进行,原顺序能显示出来是person我们一直没动,动的是filperson

<body><div id="root"><ul><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model=keywords><button @click="sortType=2">年龄升序</button><button @click="sortType=1">年龄降序</button><button @click="sortType=0">原顺序</button><li v-for="p in filperson" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{keywords:'',sortType:0,person:[{id:'001',name:'周冬雨',age:'18',sex:'女'},{id:'002',name:'马冬梅',age:'19',sex:'女'},{id:'003',name:'周杰伦',age:'17',sex:'男'},{id:'004',name:'王伦',age:'17',sex:'男'}],},computed:{filperson(){const arr= this.person.filter((p) => {//在这里筛选完之后立马返回去了,筛选完就排序才对return p.name.indexOf(this.keywords)!==-1;})if(this.sortType){arr.sort((p1,p2)=>{return this.sortType===1?p2.age-p1.age:p1.age-p2.age})}return arr}}})</script>
</body>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Studio实现内容丰富的安卓旅游景点预定

获取源码请点击文章末尾QQ名片联系&#xff0c;源码不免费&#xff0c;尊重创作&#xff0c;尊重劳动 1.开发环境 android stuido3.6 jak1.8 eclipse mysql tomcat 2.功能介绍 安卓端&#xff1a; 1.注册登录 2.查看景点列表 3.查看景点详情 4.景点预定 5.购物车支付结算功能 6…

计算机网络:计算机网络概述

计算机网络&#xff1a;计算机网络概述 因特网概述网络&#xff0c;互连网&#xff0c;因特网因特网发展的三个阶段因特网的标准化工作因特网组成 计算机网络的定义计算机网络的分类按使用者分类按传输介质分类按网络的覆盖范围分类按拓扑结构分类 因特网概述 网络&#xff0c…

红外相机和RGB相机标定:实现两种模态数据融合

1. 前期准备 RGB相机&#xff1a;森云智能SG2-IMX390&#xff0c;1个红外相机&#xff1a;艾睿光电IR-Pilot 640X-32G&#xff0c;1个红外标定板&#xff1a;https://item.taobao.com/item.htm?_ujp3fdd12b99&id644506141871&spma1z09.2.0.0.5f822e8dKrxxYI 2.操作步…

目标检测---IOU计算详细解读(IoU、GIoU、DIoU、CIoU、EIOU、Focal-EIOU、SIOU、WIOU)

常见IoU解读与代码实现 一、✒️IoU&#xff08;Intersection over Union&#xff09;1.1 &#x1f525;IoU原理☀️ 优点⚡️缺点 1.2 &#x1f525;IoU计算1.3 &#x1f4cc;IoU代码实现 二、✒️GIoU&#xff08;Generalized IoU&#xff09;2.1 GIoU原理☀️优点⚡️缺点 2…

网络编程:数据库

一、作业 1> 创建一个工人信息库&#xff0c;包含工号&#xff08;主键&#xff09;、姓名、年龄、薪资。 2> 添加三条工人信息&#xff08;可以完整信息&#xff0c;也可以非完整信息&#xff09; 3> 修改某一个工人的薪资&#xff08;确定的一个&#xff09; 4> …

SAP上线计划Cutover Plan

在SAP项目中&#xff0c;上线计划Cutover Plan(另一说法是切换计划)是指在项目的最后阶段&#xff0c;即从旧系统过渡到新SAP系统的过程中&#xff0c;组织必须执行的一系列活动和步骤的详细计划。这个计划对于确保平稳、有序的系统过渡至关重要。Cutover计划通常涵盖了组织沟通…

【漏洞复现】Progress Kemp LoadMaster 命令注入漏洞(CVE-2024-1212)

0x01 产品简介 Progress Kemp LoadMaster是一款高性能的应用交付控制器&#xff0c;具有可扩展性&#xff0c;支持实体硬件和虚拟机的负载均衡。它提供了当今应用服务所需的各种功能&#xff0c;包括深度用户验证、资安防护&#xff08;如WAF/IPS/DDoS防护&#xff09;以及零信…

2024学习鸿蒙开发,未来发展如何?

一、前言 想要了解一个领域的未来发展如何&#xff0c;可以从如下几点进行&#xff0c;避免盲从&#xff1a; 国家政策落地情况就业市场如何学习 通过上述三点&#xff0c;就能分析出一个行业的趋势。大家可以看到&#xff0c;我上面的总体逻辑就是根据国家政策来分析未来方…

代码随想录day24(2)二叉树:合并二叉树(leetcode617)

题目要求&#xff1a;将两个二叉树合并&#xff0c;要求是将同位置处的两个节点值相加&#xff0c;如果一个为空那就将另一个二叉树的值覆盖。 思路&#xff1a;如果使用迭代法&#xff0c;就是通过层序遍历&#xff0c;通过队列进行判断进行相加。如果使用递归法&#xff0c;…

git基础-获取git仓库

通过本章的学习&#xff0c;应该能够配置和初始化一个仓库&#xff0c;开始和停止跟踪文件&#xff0c;暂存和提交更改。我们还将展示如何设置 Git 来忽略特定的文件和文件模式&#xff0c;如何快速轻松地撤销错误&#xff0c;如何浏览项目的历史记录并查看提交之间的更改&…

酷开科技聚焦大屏端数据研究,构建酷开系统深度挖掘大屏商业价值

中国所有的彩色大屏中&#xff0c;智能电视规模已经过半&#xff0c;OTT平台的数据价值越发引起人们关注。作为OTT行业的头部代表&#xff0c;酷开科技一直聚焦大屏端数据研究&#xff0c;目前已经形成一套基于大屏指数的智慧营销体系&#xff0c;让OTT大屏的数字营销化水平实现…

AI:150-基于深度学习的医学数据挖掘与病症关联发现

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带关键代码,详细讲解供大家学习,希望…

ModuleNotFoundError: No module named ‘torch_geometric‘

1. 解决办法——安装库 pip install torch_geometric -i https://pypi.tuna.tsinghua.edu.cn/simple总结 如果你仍然遇到问题&#xff0c;请确保你的pip或conda是最新版本&#xff0c;并且你正在使用的Python环境是激活的。此外&#xff0c;如果你的PyTorch版本与 torch_geom…

吴恩达机器学习-可选实验室:简单神经网络(Simple Neural Network)

在这个实验室中&#xff0c;我们将使用Tensorflow构建一个小型神经网络 import numpy as np import matplotlib.pyplot as plt plt.style.use(./deeplearning.mplstyle) import tensorflow as tf from tensorflow.keras.models import Sequential from tensorflow.keras.laye…

win10 配置 oh-my-posh

win10 配置 oh-my-posh 0. 前置1. 安装1.1. 软件1.2. 字体1.3. 激活1.3.1. Git Bash1.3.2. PowerShell 2. 配置2.1. 效果2.2. 说明2.3. 其他2.3.1. 新版PowerShell2.3.2 conda问题 0. 前置 这个东西毕竟是个&#xff0c;命令行美化工具&#xff0c;所以需要先有一个命令行&…

eth uniswap 套利交易案例四

交易hash: 0x085843b47c0d1b0f820b80c166ea8dd2e3928876fb353d107e49dcf879cf8426 交易时间&#xff1a; 2024.02.29 获利&#xff1a; 196,284刀 balancer 借了 338个 weth&#xff0c; 然后和 0x3BA6A019eD5541b5F5555d8593080042Cf3ae5f4 交易用 282个weth 换了293个wste…

【矩阵】54. 螺旋矩阵【中等】

螺旋矩阵 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5] 解题思路 1、模拟顺时针螺旋顺序遍历矩阵…

名词【语法笔记】

1.名词分为几大类 2.每一类&#xff0c;又有几个小类&#xff0c;以及所需要注意什么

【每日力扣】131.分割回文串与450.删除二叉搜索树中的节点

&#x1f525; 个人主页: 黑洞晓威 &#x1f600;你不必等到非常厉害&#xff0c;才敢开始&#xff0c;你需要开始&#xff0c;才会变的非常厉害。 131.分割回文串 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的…

ROS多机通信

在充分的单机学习测试之后&#xff0c;往往要进行真实机器人的测试&#xff0c;那么就要接触到多机通信的问题。ROS采用的分布式网络通信&#xff0c;只要正确的设置ROS_MASTER_URI和ROS_IP两个环境变量&#xff0c;就可以成功实现ROS的多机通信&#xff0c;有时我们也称之为主…