5.vue学习笔记(数组变化的侦测+计算属性+Class绑定)

news2024/10/3 4:38:58

文章目录

        • 1.数组变化的侦测
          • 1.1.变更方法
          • 1.2.替换一个数组
        • 2.计算属性
          • 计算属性缓存vs方法
        • 3.Class绑定
          • 3.1.绑定对象
          • 3.2.多个对象的绑定形式
          • 3.3.绑定数组
          • 3.4.数组与对象

1.数组变化的侦测
1.1.变更方法
vue能够侦听响应式数组的变更方法，并在它们被调用时出发相关的更新。这些变更方法包括：
push()		
pop()		
shift()		
unshift()	
splice()	
sort()		
reverse()

在这里插入图片描述

1.2.替换一个数组
变更方法，就是会对调用它们的原数组进行变更。相对的，也有一些不可变的方法，例如：
filter()	concat()	slice()
这些不会更改原数组，而总是返回一个新数组，当遇到的是非变更方法时，我们需要将旧的数组替换为新的

在这里插入图片描述

//重新赋值后产生变换
this.names = this.names.concat("Brook");

<template>

    <h3>数组变化侦听</h3>
    <button @click="addListHandle">添加数据</button>
    <ul>
        <li v-for="(name,index) of names" :key="index">{{ name }}</li>
    </ul>
    <button @click="concatHandle">合并数组</button>
    <h3>数组1</h3>
    <p v-for="(num,index) of num1" :key="index">{{ num }}</p>
    <h3>数组2</h3>
    <p v-for="(num,index) of num2" :key="index">{{ num }}</p>

</template>

<script>

export default {
    data(){
        return{
            names: ["Tom","Bob","Lisa"],
            num1: [1,2,3,4,5],
            num2: [6,7,8,9,10]
        }
    },
    methods:{
        addListHandle(){
            //引起UI自动更新
            //this.names.push("Brook");
            //不会引起UI自动更新
            // this.names.concat("Brook");
            // console.log(this.names.concat("Brook"));
            //重新赋值后产生变换
            this.names = this.names.concat("Brook");
        },
        concatHandle(){
            this.num1 = this.num1.concat(this.num2);
        }
    }
}
</script>
2.计算属性
模板中的表达式虽然方便，但也只能用来做简单的操作，如果在模板中写太多的逻辑，会让模板变得臃肿，难以维护。
因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑

<template>

    <h3>{{ person.name }}</h3>
    <p>{{ person.content.length > 0 ? "yes" : "no" }}</p>
</template>

<script>

export default {
    data(){
        return {
            person:{
                name: "张三",
                content: ["软件工程","Java","互联网与应用技术"]
            }
        }
    }
}
</script>

改造后

<template>

    <h3>{{ person.name }}</h3>
    <p>{{ personContent }}</p>
    <p>{{ personContent1() }}</p>
</template>

<script>

export default {
    data(){
        return {
            person:{
                name: "张三",
                content: ["软件工程","Java","互联网与应用技术"]
            }
        }
    },
    //计算属性
    computed:{
        personContent(){
            return this.person.content.length > 0 ? "yes" : "no"
        }
    },
    //放函数或者方法
    methods:{
        personContent1(){
            return this.person.content.length > 0 ? "yes" : "no"
        } 
    }
}
</script>
计算属性缓存vs方法
以上代码可以看出，计算属性和方法都能实现，那么为什么要使用计算属性：
计算属性：计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才会重新计算
（只要代码不变，只执行一次，多次调用的值也只执行一次）
方法：方法调用总是会在重渲染发生时再次执行函数
（方法调用几次，执行几次）
3.Class绑定
数据绑定的一个常见需求场景是操纵元素的 CSS class列表，因为class是attribute，我们可以和其他attribute一样使用v-bind将它们和动态字符串绑定。
但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且容易出错的。
因此，Vue专门为class的v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组

<template>

    <h3>Class样式</h3>
    <p :class="myClass">Class样式绑定</p>
</template>

<script>

export default {
    data(){
        return{
            myClass: "Demo"
        }
    }
}    
</script>
3.1.绑定对象
<template>

    <h3>Class样式</h3>
    <p :class="{ 'active':isActive,'text-danger':hasError }">Class样式绑定</p>
</template>

<script>

export default {
    data(){
        return{
            isActive: true,
            hasError: true
        }
    }
}    
</script>

<style>
.active{
    
    font-size: 30px;
}
.text-danger{
    color:red;
}

</style>
3.2.多个对象的绑定形式
<template>

    <h3>Class样式</h3>
    <p :class="ClassObject">Class样式绑定</p>
</template>

<script>

export default {
    data(){
        return{
            ClassObject:{
                active: true,
                'text-danger': true
            }
        }
    }
}    
</script>

<style>
.active{
    
    font-size: 30px;
}
.text-danger{
    color:red;
}

</style>
3.3.绑定数组
<template>

    <h3>Class样式</h3>
    <p :class="[arrActive,arrTextDanger]">Class样式绑定3</p>
</template>

<script>

export default {
    data(){
        return{
            arrActive: 'active',
            arrTextDanger: 'text-danger'
        }
    }
}    
</script>

<style>
.active{
    
    font-size: 30px;
}
.text-danger{
    color:red;
}

</style>

如果想在数组中有条件地渲染某个class，也可以使用三元运算符

<template>

    <h3>Class样式</h3>
    <p :class="[isActive ? 'active' : '']">Class样式绑定4</p>
</template>

<script>

export default {
    data(){
        return{
            isActive: true
        }
    }
}    
</script>

<style>
.active{
    
    font-size: 30px;
}
.text-danger{
    color:red;
}

</style>
3.4.数组与对象
数组和对象嵌套过程中，只能是数组嵌套对象。[{},{}]

<template>

    <h3>Class样式</h3>
    <p :class="[{'active':isActive},arrTextDanger]">Class样式绑定5</p>
    <p :class="[isActive ? 'active' : '',{'text-danger':hasError}]">Class样式绑定6</p>
</template>

<script>

export default {
    data(){
        return{
            isActive: true,
            hasError: true,
            
            arrActive: 'active',
            arrTextDanger: 'text-danger'
        }
    }
}    
</script>

<style>
.active{
    
    font-size: 30px;
}
.text-danger{
    color:red;
}

</style>

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

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

相关文章

opencv003图像裁剪（应用NumPy矩阵的切片）

opencv003图像裁剪（应用NumPy矩阵的切片）

这一部分相对于马上要学习的二值化是要更更更简单一些的&#xff0c;只需三行&#xff0c;便能在opencv上裁剪图像啦&#xff08;顺便云吸猫&#xff0c;太可爱了&#xff01;&#xff09; 出处见水印&#xff01; 1、复习图像的显示 前几天期末考试&#xff0c;太久没有看…
阅读更多...
大语言模型LLM微调技术：Prompt Tuning

大语言模型LLM微调技术：Prompt Tuning

1 预训练语言模型概述 1.1 预训练语言模型的发展历程 截止23年3月底&#xff0c;语言模型发展走过了三个阶段&#xff1a; 第一阶段 &#xff1a;设计一系列的自监督训练目标&#xff08;MLM、NSP等&#xff09;&#xff0c;设计新颖的模型架构&#xff08;Transformer&#…
阅读更多...
Windows下MongoDB启动及停止服务

Windows下MongoDB启动及停止服务

1.CMD黑窗口输入启动命令&#xff1a; net start MongoDB 2.CMD黑窗口输入停止命令&#xff1a; net stop MongoDB
阅读更多...
算法第十二天-矩形区域不超过K的最大数值和

算法第十二天-矩形区域不超过K的最大数值和

矩形区域不超过K的最大数值和 题目要求 解题思路 来自[宫水三叶] 从题面来看显然是一道[二维前缀和]的题目。本题预处理前缀和的复杂度为O(m* n) 搜索所有子矩阵需要枚举[矩形左上角]和[矩形右下角]&#xff0c;复杂度是 O ( m 2 ∗ n 2 ) O(m^2 * n^2) O(m2∗n2)&#xff0c…
阅读更多...
GPT/GPT4科研应用与AI绘图技术及论文高效写作教程

GPT/GPT4科研应用与AI绘图技术及论文高效写作教程

详情点击链接&#xff1a;GPT/GPT4科研实践应用与AI绘图技术及论文高效写作教程 一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析&#xff0c;AI画图&#xff0c;图像识别&#xff0c;文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型…
阅读更多...
华媒舍：国内外媒体发稿点爆品牌提高影响力

华媒舍：国内外媒体发稿点爆品牌提高影响力

在数字经济时代&#xff0c;品牌营销推广越来越尤为重要。而国内外媒体宣发就成为了促进品牌提高的重要引擎。本文将对危害品牌提高的影响因素开展科谱详细介绍。 一、媒体宣发&#xff1a;品牌营销推广的重要途径媒体宣发是指通过各种媒体网络资源&#xff0c;根据报导、视频等…
阅读更多...
常用的窗体控件

常用的窗体控件

常用窗体控件 MenuStrip&#xff1a;一个标准的菜单栏控件&#xff0c;可以添加菜单单项和子菜单项 //双击子菜单项同样可以添加点击事件 //menu&#xff1a;菜单 item&#xff1a;菜单选项 //当点击新建选项的时候触发的事件 private void 新建ToolStripMenuItem_Click(ob…
阅读更多...
Docker 镜像以及镜像分层

Docker 镜像以及镜像分层

Docker 镜像以及镜像分层 1 什么是镜像2 Docker镜像加载原理2.1 UnionFs&#xff1a;联合文件系统2.2 Docker镜像加载原理2.3 Docker镜像的特点 3 镜像的分层结构4 可写的容器层 1 什么是镜像 镜像是一种轻量级、可执行的独立软件包&#xff0c;用来打包软件运行环境和基于运行…
阅读更多...
玩转Mysql 三（权限管理）

玩转Mysql 三（权限管理）

一路走来&#xff0c;所有遇到的人&#xff0c;帮助过我的、伤害过我的都是朋友&#xff0c;没有一个是敌人。 一、用户管理 1、登录MySQL服务器 语法示例&#xff1a; mysql –h hostname|hostIP –P port –u username –p DatabaseName –e "SQL语句" 详细命令…
阅读更多...
【LeetCode:2807. 在链表中插入最大公约数 | 链表】

【LeetCode:2807. 在链表中插入最大公约数 | 链表】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
响应式开发

响应式开发

响应式开发的原理Bootstrap前端开发框架Bootstrap栅格系统阿里百秀首页案例 响应式开发原理 1 响应式需要一个父级做为布局容器&#xff0c;来配合子级元素来实现变化效果。 2 在不同屏幕下&#xff0c;通过媒体查询来改变这个布局容器的大小&#xff0c;再改变里面子元素的排…
阅读更多...
MySQL之视图内连接、外连接、子查询

MySQL之视图内连接、外连接、子查询

一、视图 1.1 含义 虚拟表&#xff0c;和普通表一样使用 视图&#xff08;view&#xff09;是一个虚拟表&#xff0c;其内容由查询定义。同真实的表一样&#xff0c;视图包含一系列带有名称的列和行数据。但是&#xff0c;数据库中只存放了视图的定义&#xff0c;而并没有存放…
阅读更多...
PEFT: 在低资源硬件上对十亿规模模型进行参数高效微调

PEFT: 在低资源硬件上对十亿规模模型进行参数高效微调

1 引言 最近&#xff0c;深度学习的研究中出现了许多大型预训练模型&#xff0c;例如 GPT-3、BERT 等&#xff0c;这些模型可以在多种自然语言处理任务中取得优异的性能表现。而其中&#xff0c;ChatGPT 模型因为在对话生成方面的表现而备受瞩目&#xff0c;成为了自然语言处理…
阅读更多...
JavaWeb 页面上显示中文乱码解决~

JavaWeb 页面上显示中文乱码解决~

你们好&#xff0c;我是金金金。 场景 我正在学习servlet&#xff0c;通过write()方法向页面上写入中文数据&#xff0c;没想到显示的都是?? 乱码&#xff0c;如图 排查 很明显可以看出来页面上显示的是??&#xff0c;我猜想肯定是字符编码的问题&#xff0c;导致乱码 造成…
阅读更多...
Mybatis分页插件PageHelper的配置和使用

Mybatis分页插件PageHelper的配置和使用

文章目录 每页10条记录&#xff0c;取第一页&#xff0c;返回的是前10条记录每页10条记录&#xff0c;取第二页&#xff0c;返回的是第11条记录&#xff0c;到第20条记录&#xff0c; MySQL对分页的支持 简单来说MySQL对分页的支持是通过limit子句。请看下面的例子。 limit关键…
阅读更多...
[每周一更]-(第81期)：PS抠图流程（扭扭曲曲的身份证修正）

[每周一更]-(第81期)：PS抠图流程（扭扭曲曲的身份证修正）

应朋友之急&#xff0c;整理下思路&#xff0c;分享一下~~ 分两步走&#xff1a;先用磁性套索工具圈出要处理的图&#xff1b;然后使用透视剪裁工具&#xff0c;将扭曲的图片拉平即可&#xff1b;(macbook pro) 做事有规则&#xff0c;才能更高效;用什么工具&#xff0c;先列举…
阅读更多...
【非关系型数据库】Redis概述及安装、命令使用

【非关系型数据库】Redis概述及安装、命令使用

目录 前瞻 关系型数据库 非关系型数据库 关系型数据库和非关系型数据库区别 数据存储方式不同 扩展方式不同 对事务性的支持不同 非关系型数据库产生背景 总结 Redis简介 什么是Redis Redis具有的优点 Redis使用场景 哪些数据适合放入缓存中&#xff1f; Redis为什…
阅读更多...
MySQL基础笔记（2）DDL数据定义语句

MySQL基础笔记（2）DDL数据定义语句

一.数据库操作 1.展示 展示目前DBMS中全部的数据库~ show databases; 2.查询 查询当前所处的数据库~ select database(); 3.创建 创建一个数据库&#xff08;中括号包裹的部分均为可选项~&#xff09; Create database [if not exists] 数据库名 [default charset 字符…
阅读更多...
虾皮怎么上架商品：如何在Shopee上上架商品？完整步骤指南

虾皮怎么上架商品：如何在Shopee上上架商品？完整步骤指南

在虾皮&#xff08;Shopee&#xff09;平台上上架商品是一个相对简单的过程&#xff0c;但是对于新手卖家来说可能会感到有些困惑。不用担心&#xff0c;本文将为您提供一个完整的指南&#xff0c;详细介绍在Shopee上上架商品的步骤和注意事项。 先给大家推荐一款shopee知虾数据…
阅读更多...
用友U8 Cloud smartweb2.RPC.d XXE漏洞复现

用友U8 Cloud smartweb2.RPC.d XXE漏洞复现

0x01 产品简介 用友U8 Cloud 提供企业级云ERP整体解决方案，全面支持多组织业务协同，实现企业互联网资源连接。 U8 Cloud 亦是亚太地区成长型企业最广泛采用的云解决方案。 0x02 漏洞概述 用友U8 Cloud smartweb2.RPC.d接口处存在 XXE漏洞，攻击者可通过该漏洞获取敏感文件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023