Vue核心基础4：绑定样式、条件渲染、列表渲染
1 绑定样式
【代码】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定样式</title><script src="../js/vue.js"></script><style>.basic {width: 200px;height: 100px;background-color: pink;}.normal {background-color: skyblue;font-size: larger;border: 1px solid black;}.sad {border-radius: 10px;}</style>
</head><body><div id="root"><!-- 1.绑定class样式---字符串写法， 适用于样式的类名不确定，需要动态指定 --><div class="basic" :class="mood" @click="changeMethod">test</div> <br><!-- 2.绑定class样式---数组写法， 适用于要绑定的样式个数不确定、名字也不确定 --><div class="basic" :class="classArr">test11</div> <br><!-- 3.绑定class样式---对象写法， 适用于要绑定的样式个数确定、名字也确定，但要动态决定用不用 --><div class="basic" :class="classObj" @click="changeMethod">test</div><br><!-- 4.绑定内联样式 style --><!-- 对象形式并写成小驼峰的形式 --><div class="basic" :style="{fontSize: fs + 'px', color: 'red'}">{{name}}</div><!-- 数组写法,数组里面可以加多个样式对象 --><div class="basic" :style="[classObj1, classObj2]">{{name}}</div><script>const x = new Vue({el: '#root',data: {name: 'Vue',mood: 'normal',classArr: ['normal', 'sad'],classObj: {normal: false,sad: false},fs: 30,classObj1: {fontSize: '30px',color: 'red'},classObj2: {backgroundColor: 'orange'}},methods: {changeMethod() {const arr = ['normal', 'sad']const index = Math.floor(Math.random() * 2)this.mood = arr[index]}},})</script>
</body></html>2 条件渲染
【代码】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>条件渲染</title><script src="../js/vue.js"></script>
</head><body><div id="root"><!-- 1.使用v-show作条件渲染 true或false --><h1 v-show="true">hello {{name}}</h1><!-- 2.使用 v-if 作条件渲染 --><h1 v-if="true">hello {{name}}</h1><!-- 3.使用 v-else v-else-if作条件渲染, 连续使用的话，必须写在一起，不能被其它标签打断--><h1 v-if="n === 1">hello {{name}}</h1><h1 v-else-if="n === 2">hello222 {{name}}</h1><h1 v-else>bye {{name}}</h1><!-- 想要某个条件成立时，下面全部显示出来，之前用div会破坏代码结构， 现在可以用template , 不会破坏结构--><!-- template只能配合 v-if使用，不能配合v-show使用 --><template v-if="n === 1"><h2>你好</h2><h2>hello</h2><h2>say</h2><h2>bye</h2></template></div><script>const x = new Vue({el: '#root',data: {name: 'Vue',url: 'http://www.baidu.com',n: 1}})</script>
</body></html>
3 列表渲染
【代码】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表渲染</title><script src="../js/vue.js"></script>
</head><body><div id="root"><ul><!-- 对于Vue2而言 in of 都可以 --><!-- 1.遍历数组 --><li v-for="p in persons" :key="p.id">姓名：{{p.name}} ---- 年龄：{{p.age}}</li><!-- <li v-for="(p,index) in persons" :key="index">姓名：{{p.name}} ---- 年龄：{{p.age}}</li> --><!-- 2.遍历对象 --><h2>汽车信息</h2><li v-for="(value, key) in car" :key="key">{{key}}: {{value}}</li><!-- 3.遍历字符串 --><h2>遍历字符串</h2><li v-for="(char,index) of name" :key="index">{{index}}-{{char}}</li><!-- 4.遍历指定次数 --><h2>遍历指定次数</h2><li v-for="(number,index) of 5" :key="index">{{index}}-{{number}}</li></ul></div><script>const x = new Vue({el: '#root',data: {name: 'Vue',persons: [{ id: '001', name: '张三', age: 18 },{ id: '002', name: '李四', age: 19 },{ id: '003', name: '王五', age: 20 }],car: {name: '奔驰',price: '40万',color: '黑色'}}})</script>
</body></html>
3.1 v-for 中 key 的作用
分析：因为以索引号作为key, 所以首先是找到相同的key进行比对，如果标签内容不相同，则用新的替换旧的。因为比对的是虚拟DOM, 所以不管input中有没有内容，都是一样的。所以在比对的时候，会复用原来的input。这里就会出现问题了
这里用id 作为key 就不会由上述index作为key 的问题
3.2 列表过滤
方法1：可以用watch属性实现
<div id="root"><ul><h2>人员列表 (列表过滤)</h2><input type="text" placeholder="请输入..." v-model="keyWord"><br><br><!-- 1.遍历数组 --><li v-for="p in filterPersons" :key="p.id">姓名：{{p.name}} ---- 年龄：{{p.age}} ---- 性别：{{p.sex}}</li></ul></div> const x = new Vue({el: '#root',data: {name: 'Vue',keyWord: '',persons: [{ id: '001', name: '张三', age: 18, sex: '男' },{ id: '002', name: '张杰', age: 19, sex: '男' },{ id: '003', name: '张韶涵', age: 20, sex: '女' },{ id: '004', name: '章若楠', age: 21, sex: '女' },{ id: '005', name: '周杰伦', age: 22, sex: '男' }],filterPersons: []},watch: {keyWord: {immediate: true,// indexOf 字符串中是否包含某个字符handler(val) {this.filterPersons = this.persons.filter(p => p.name.indexOf(val) !== -1)}}}方法2：使用computed属性实现
const x = new Vue({el: '#root',data: {name: 'Vue',keyWord: '',persons: [{ id: '001', name: '张三', age: 18, sex: '男' },{ id: '002', name: '张杰', age: 19, sex: '男' },{ id: '003', name: '张韶涵', age: 20, sex: '女' },{ id: '004', name: '章若楠', age: 21, sex: '女' },{ id: '005', name: '周杰伦', age: 22, sex: '男' }]},computed: {filterPersons() {return this.persons.filter(p => p.name.indexOf(this.keyWord) !== -1)}}})3.3 列表排序
【代码】
<body><div id="root"><ul><!-- 对于Vue2而言 in of 都可以 --><h2>人员列表 (列表排序)</h2><input type="text" placeholder="请输入..." v-model="keyWord"><button @click="sortType = 1">升序</button><button @click="sortType = 2">降序</button><button @click="sortType = 0">原顺序</button><br><br><!-- 1.遍历数组 --><li v-for="p in filterPersons" :key="p.id">姓名：{{p.name}} ---- 年龄：{{p.age}} ---- 性别：{{p.sex}}</li></ul></div><script>// 用computed属性实现const x = new Vue({el: '#root',data: {name: 'Vue',keyWord: '',sortType: 0, //0原顺序，1升序，2降序persons: [{ id: '001', name: '张三', age: 30, sex: '男' },{ id: '002', name: '张杰', age: 19, sex: '男' },{ id: '003', name: '张韶涵', age: 45, sex: '女' },{ id: '004', name: '章若楠', age: 21, sex: '女' },{ id: '005', name: '周杰伦', age: 22, sex: '男' }]},computed: {filterPersons() {const arr = this.persons.filter(p => p.name.indexOf(this.keyWord) !== -1)// 判断是否需要排序if (this.sortType) {arr.sort((p1, p2) => {return this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age})}return arr}}})</script>
</body>相关文章：
Vue核心基础4：绑定样式、条件渲染、列表渲染
1 绑定样式 【代码】 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>绑定样式</title><s…...
go-zero读取mysql部分字段
读取部分字段，使用函数 QueryRowPartialCtx 。 假设有如下一张表： CREATE TABLE test (id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY, ctime DATETIME);要读取字段 ctime 值。 定义一结构体： type X struct {state int db:"…...
反转一个单链表
反转一个单链表 题意：反转一个单链表。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 思路 需要虚拟节点么？ 答：不需要，因为没有删除节点，只是改变了节点的指向。 遍…...
拿捏c语言指针（中）
前言 书接上回 拿捏c语言指针（上） 此篇主要讲解的是指针与数组之间的爱恨情仇，跟着我的脚步一起来看看吧~ 创造不易，可以帮忙点点赞吗 如有差错，欢迎指出 理解数组名 数组名是首元素地址 例外 1.sizeof࿰…...
鸿蒙语言ArkTS（更好的生产力与性能）
ArkTS是鸿蒙生态的应用开发语言 ArkTS提供了声明式UI范式、状态管理支持等相应的能力，让开发者可以以更简洁、更自然的方式开发应用。 同时，它在保持TypeScript（简称TS）基本语法风格的基础上，进一步通过规范强化静态检…...
VBA技术资料MF120：打印固定标题行列
我给VBA的定义：VBA是个人小型自动化处理的有效工具。利用好了，可以大大提高自己的工作效率，而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套，分为初级、中级、高级三大部分，教程是对VBA的系统讲解&#…...
MongoDB聚合运算符：$add
$add运算符将将数字相加或将数字和日期相加。如果参数之一是日期，则 $add会将其他参数视为毫秒，并添加到日期中。 语法 { $add: [ <expression1>, <expression2>, ... ] }参数可以是任何有效的表达式，只要能否解析为数值或日期…...
《剑指Offer》笔记题解思路技巧优化 Java版本——新版leetcode_Part_4
《剑指Offer》笔记&题解&思路&技巧&优化_Part_4 😍😍😍 相知🙌🙌🙌 相识😢😢😢 开始刷题1. LCR 148. 验证图书取出顺序——栈的压入、弹出序列2. LCR 14…...
数据库第四次实验
目录 1.建立数据表并插入数据 2 视图的创建 2.1 行列子集视图的创建 2.2 多表视图 2.3视图上建立视图 2.4分组视图 2.5带表达式的视图 3 删除视图 4 查询视图 5 更新视图 5.1 修改某一个属性 5.2 删除一条数据 5.3 插入…...
基于PPNSA+扰动算子的车间调度最优化matlab仿真,可以任意调整工件数和机器数,输出甘特图
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于PPNSA扰动算子的车间调度最优化matlab仿真,可以任意调整工件数和机器数,输出甘特图和优化收敛曲线。 2.测试软件版本以及运行结果展示 MATLAB2022a版本运行…...
UnityShader——06UnityShader介绍
UnityShader介绍 UnityShader的基础ShaderLab UnityShader属性块介绍 Properties {//和public变量一样会显示在Unity的inspector面板上//_MainTex为变量名，在属性里的变量一般会加下划线，来区分参数变量和临时变量//Texture为变量命名//2D为类型&…...
人工智能学习与实训笔记（一）：零基础理解神经网络
人工智能专栏文章汇总：人工智能学习专栏文章汇总-CSDN博客 本篇目录 一、什么是神经网络模型 二、机器学习的类型 2.1 监督学习 2.2 无监督学习 2.3 半监督学习 2.4 强化学习 三、网络模型结构基础 3.1 单层网络 编辑 3.2 多层网络 3.3 非线性多层网络…...
LeetCode刷题小记 一、【数组】
LeetCode刷题小记 一、【数组】 文章目录 LeetCode刷题小记 一、【数组】写在前面1. 数组1.1 理论基础1.2 二分查找1.3 移除元素1.4 有序数组的平方1.5 长度最小的子数组1.6 螺旋矩阵II Reference 写在前面 本系列笔记主要作为笔者刷题的题解，所用的语言为Python3&…...
iOS总体框架介绍和详尽说明
iOS是由苹果公司开发的移动操作系统，为iPhone、iPad、iPod Touch等设备提供支持。iOS采用了基于Unix的核心（称为Darwin），并采用了类似于Mac OS X的图形用户界面。以下是iOS的总体框架介绍和详尽说明： UIKit框架&#…...
【C++】const与constexpr详解
1. constexpr：常量表达式 所谓常量表达式,指的就是由多个(≥1)常量组成的表达式。换句话说,如果表达式中的成员都是常量,那么该表达式就是一个常量表达式。这也意味着，常量表达式一旦确定，其值将无法修改。 实际开发中，我们经常会…...
)
蓝桥杯：日期统计讲解(C++)
日期统计 本题来自于：2023年十四届省赛大学B组真题 主要考察：暴力。 代码放在下面，代码中重要的细节全都写了注释，非常清晰明了： #include <bits/stdc.h> //万能头文件 using namespace std;int main() {…...
中的正则表达式包含多个括号时的返回值——包含元组的列表)
Python re.findall()中的正则表达式包含多个括号时的返回值——包含元组的列表
当re.findall()中的正则表达式包含多个括号时，返回值是一个列表，其中每个元素都是一个元组。这个元组的长度与正则表达式中括号的数量相同，元组中的每个元素都是与相应括号中的模式匹配的文本。 import re # 定义一个包含三个括号的正则表达…...
Python——列表
一、列表的特性介绍 列表和字符串⼀样也是序列类型的数据 列表内的元素直接⽤英⽂的逗号隔开，元素是可变的，所以列表是可变的数据类型，⽽字符串不是。 列表的元素可以是 Python 中的任何类型的数据对象。如：字符串、…...
无人机图像识别技术研究及应用，无人机AI算法技术理论，无人机飞行控制识别算法详解
在现代科技领域中，无人机技术是一个备受瞩目的领域。随着人们对无人机应用的需求在不断增加，无人机技术也在不断发展和改进。在众多的无人机技术中，无人机图像识别技术是其中之一。 无人机图像识别技术是利用计算机视觉技术对无人机拍摄的图像…...
清华AutoGPT：掀起AI新浪潮，与GPT4.0一较高下
引言： 随着人工智能技术的飞速发展，自然语言处理（NLP）领域迎来了一个又一个突破。最近，清华大学研发的AutoGPT成为了业界的焦点。这款AI模型以其出色的性能，展现了中国在AI领域的强大实力。 目录 引言&…...
uniapp 对接腾讯云IM群组成员管理（增删改查）
UniApp 实战：腾讯云IM群组成员管理（增删改查） 一、前言 在社交类App开发中，群组成员管理是核心功能之一。本文将基于UniApp框架，结合腾讯云IM SDK，详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...
【JVM】- 内存结构
引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣（LeetCode） 思路 使用两个栈：一个存储重复次数，一个存储字符串 遍历输入字符串： 数字处理：遇到数字时，累积计算重复次数左括号处理：保存当前状态&a…...
macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
Python如何给视频添加音频和字幕
在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。 环境准备 在开始之前，需要安装以下Python库：…...