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包含val
                    return 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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Python】进阶学习:基于Numpy实现按指定维度拼接两个数组

【Python】进阶学习&#xff1a;基于Numpy实现按指定维度拼接两个数组 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希…

第十三届蓝桥杯(C/C++ 大学B组)

目录 试题 A: 九进制转十进制 试题 B: 顺子日期 试题 C: 刷题统计 试题 D: 修剪灌木 试题 E: X 进制减法 试题 F: 统计子矩阵 试题 G: 积木画 试题 H: 扫雷 试题 I: 李白打酒加强版 试题 J: 砍竹子 试题 A: 九进制转十进制 九进制正整数 ( 2022 )转换成十进制等于多…

2000-2021年各省外商直接投资水平面板数据(含原始数据+计算结果)(无缺失)

2000-2021年各省外商直接投资水平面板数据&#xff08;含原始数据计算结果&#xff09;&#xff08;无缺失&#xff09; 1、时间&#xff1a;2000-2021年 2、指标&#xff1a;外商直接投资额&#xff08;万美元&#xff09;、外商直接投资额&#xff08;万元&#xff09;、国…

MySQL语法分类 DQL(4)聚合函数

为了更好的学习这里给出基本表数据用于查询操作 create table student (id int, name varchar(20), age int, sex varchar(5),address varchar(100),math int,english int );insert into student (id,name,age,sex,address,math,english) values (1,马云,55,男,杭州,66,78),…

2024年【危险化学品经营单位主要负责人】找解析及危险化学品经营单位主要负责人模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品经营单位主要负责人找解析考前必练&#xff01;安全生产模拟考试一点通每个月更新危险化学品经营单位主要负责人模拟考试题目及答案&#xff01;多做几遍&#xff0c;其实通过危险化学品经营单位主要负责人…

移动云行动:5.5G技术引领数字化转型

刚刚结束的全国两会上&#xff0c;有人大代表建议应尽快发挥5G-A&#xff08;5.5G&#xff09;优势&#xff0c;加快试点城市布局。此前&#xff0c;中国移动已宣布将在300多个城市启动5.5G商用部署。在通信技术的历史长河中&#xff0c;4G改变了我们的生活方式&#xff0c;而5…

【Poi-tl Documentation】区块对标签显示隐藏改造

前置说明&#xff1a; <dependency><groupId>com.deepoove</groupId><artifactId>poi-tl</artifactId><version>1.12.1</version> </dependency>模板&#xff1a; 删除行表格测试.docx 改造前测试效果 package run.siyuan…

Iframe 嵌入: 页面嵌入并保持自适应页面的宽高并铺满整个屏幕

文章目录 问题分析1. 嵌入 Iframe2. 样式3. 源码 问题 当我们使用 Iframe 嵌入页面后&#xff0c;会看到它只在小小的一部分进行展示&#xff0c;如何让它铺满整个屏幕 分析 1. 嵌入 Iframe <template><div><iframe :src"embeddedPageUrl" width…

【编程项目开源】微信飞机大战(鸿蒙版)

目标 仿微信飞机大战 效果 开发工具 下载DevEco Studio 工程截图 开源地址 https://gitee.com/lblbc/plane_game/tree/master/PlaneGame_hongmeng_ArkTS 关于 厦门大学计算机专业|华为八年高级工程师 专注《零基础学编程系列》 http://lblbc.cn/blog 包含&#xff1a;Ja…

18.相交链表

给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返回结果后&…

腾讯云2核4g服务器能支持多少人访问?没搞错吧

腾讯云轻量2核4G5M带宽服务器支持多少人在线访问&#xff1f;5M带宽下载速度峰值可达640KB/秒&#xff0c;阿腾云以搭建网站为例&#xff0c;假设优化后平均大小为60KB&#xff0c;则5M带宽可支撑10个用户同时在1秒内打开网站&#xff0c;并发数为10&#xff0c;经阿腾云测试&a…

2024年【P气瓶充装】模拟考试及P气瓶充装证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 P气瓶充装模拟考试是安全生产模拟考试一点通生成的&#xff0c;P气瓶充装证模拟考试题库是根据P气瓶充装最新版教材汇编出P气瓶充装仿真模拟考试。2024年【P气瓶充装】模拟考试及P气瓶充装证考试 1、【多选题】《中华…

Java中的实用类讲解(上篇)

如果想观看更多Java内容 可上我的个人主页关注我&#xff0c;地址子逸爱编程-CSDN博客https://blog.csdn.net/a15766649633?spm1000.2115.3001.5343 使用工具 IntelliJ IDEA Community Edition 2023.1.4 使用语言 Java8 代码能力快速提升小方法&#xff0c;看完代码自己敲…

python 实现阿里云OSS文件上传

因为我们出口的带宽限制&#xff0c;测试经常找我给他上传个包到阿里云的对象存储&#xff0c;虽然传起来也不是很费事&#xff0c;但是出于运维的职业素养&#xff0c;特意写了一个自动上传的接口&#xff0c;代码如下&#xff1a; # -*- coding: UTF-8 -*- from flask imp…

【保姆及教程】简直不要太爽了!md文件图床工具picgo配合typora和阿里云oss存储,实现文md文件的复制转贴

md文件图床工具picgo的安装和使用、配合阿里云面向对象oss 一、网址 官方网址&#xff1a;https://molunerfinn.com/PicGo/ github地址&#xff1a;https://github.com/Molunerfinn/picgo/releases 选择对应的版本下载即可 但也可以提供我给你的下载的地址&#xff1a; 方…

前端学习之css选择器--基本选择器、关系选择器、属性选择器、复合选择器、伪类选择器

目录 基本选择器 结果 关系选择器 结果 父子关系 祖先后代关系 相邻兄弟关系 兄弟关系 ​编辑 属性选择器 结果 复合选择器 结果 伪类选择器 结果 伪类选择器-操作标签 结果 未访问 访问后 悬停 基本选择器 <!DOCTYPE html> <html lang"en"…

Java-PriorityQueue源码分析

PriorityQueue 源码分析 Java中的PriorityQueue采用的是堆这种数据结构来实现的,而存储堆采用的则是数组。 堆是一个完全二叉树,堆中每一个节点的值都必须大于等于(或小于等于)其子树中每个节点的值,对于每个节点的值都大于等于子树中每个节点值的堆&#xff0c;我们叫做大顶…

数学建模--MATLAB基本使用

1.线性方程组 这个是一个线性方程组&#xff08;属于线性代数的范畴&#xff09;&#xff0c;Axb类型的方程&#xff0c;如果使用MATLAB进行求解&#xff0c;就需要分别表示A矩阵&#xff08;线性方程组未知数前面的系数&#xff09;&#xff0c;b矩阵&#xff08;表示等式右边…

探索Docker:原理、安装与基础应用

进程: 一旦“程序”被执行起来&#xff0c;它就从磁盘上的二进制文件&#xff0c;变成了计算机内存中的数据、寄存器里的值、堆栈中的指令、被打开的文件&#xff0c;以及各种设备的状态信息的一个集合。像这样一个程序运行起来后的计算机执行环境的总和称为进程 静态表现&am…

数据结构:基于数组实现简单的数据缓存区(简单队列)

1 前言 在我们使用CAN或者以太网调试时&#xff0c;经常需要缓存最近n次收到的数据&#xff0c;以便于我们对数据进行分析。 实现这一想法我们很容易就会想到队列&#xff0c;队列就是一种先进先出的数据结构&#xff0c;之前在《数据结构&#xff1a;基于数组的环形队列&…