当前位置: 首页 > news >正文

Vue学习笔记(五)

Class绑定

数据绑定的一个常见需求场景式操纵元素的CSS class列表,因为class是attribute,我们可以和其他attribute一样使用v-bind将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,Vue专门为classv-bind用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组。

绑定对象

isActive: true,hasError: false,classObject: {'active': true,'text-danger': true},
<p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p><p :class="classObject">Class样式绑定2</p>

绑定数组

<p :class="[arrActive,arrHasError]">Class样式绑定3</p>
<p :class="[isActive ? 'active' : '',hasError ? 'text-danger' : '']">Class样式绑定4</p>

绑定对象和数组

Class样式绑定5

注意事项
数组和对象的嵌套过程中,只能数组嵌套对象,不能反其道而行

<script>export default {data() {return {isActive: true,hasError: false,classObject: {'active': true,'text-danger': true},arrActive: "active",arrHasError: "text-danger"}}}
</script><template><p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p><p :class="classObject">Class样式绑定2</p><p :class="[arrActive,arrHasError]">Class样式绑定3</p><p :class="[isActive ? 'active' : '',hasError ? 'text-danger' : '']">Class样式绑定4</p><p :class="[{active:isActive},{'text-danger':hasError}]">Class样式绑定5</p>
</template><style>.active {/* color: red; */font-size: 30px;}.text-danger {color: red;}</style>

20241025161104

style绑定

数据绑定的一个常见场景是操纵元素的CSS style列表,因为style是attribute,我们可以和其他attribute一样使用v-bind将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,Vue专门为stylev-bind用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组。

绑定对象

<script>export default {data() {return {activeColor: 'green',size: 30,styleObject: {color: 'red',fontSize: '30px'}}}}
</script><template><p :style="{color:activeColor,fontSize:size+'px'}">Style绑定1</p><p :style="styleObject">Style绑定2</p>
</template>

绑定数组(了解)

<p :style="[styleObject]">Style绑定3</p>

侦听器

我们可以使用watch选项在每次响应式属性发生变化时触发一个函数

<script>export default {data() {return {message: 'Hello Vue 3'}},methods: {updateHandle() {this.message = 'Hello World!'}},watch: {message(newValue, oldValue) {//数据发生变化时触发console.log(newValue, oldValue)}}}
</script><template><h3>侦听器</h3><p >{{ message }}</p><button @click="updateHandle">修改数据</button>
</template>

侦听器函数名必须与key保持一致

表单输入绑定

在前端处理表单时,我们常常需要将表单输入框的内容同步给JavaScript中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦,v-model指令帮我们简化了这一步骤。

文本框

<script>export default {data() {return {message: ""}}}
</script><template><h3>表单输入绑定</h3><form><input type="text" v-model="message"><p>Message is: {{ message }}</p></form>
</template>

复选框

<script>export default {data() {return {message: "",checked: false}}}
</script><template><h3>表单输入绑定</h3><form><input type="text" v-model="message"><p>Message is: {{ message }}</p><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label></form>
</template>

修饰符

v-model也提供了修饰符:.lazy.number.trim

.lazy

默认情况下,v-model会在每次input事件后更新数据。可以添加lazy修饰符来改为在每次change事件后更新数据。

<input type="text" v-model.lazy="message">

.number

只记录数字

<input type="text" v-model.number="message">

.trim

忽略前后空格

<input type="text" v-model.trim="message">

相关文章:

Vue学习笔记(五)

Class绑定 数据绑定的一个常见需求场景式操纵元素的CSS class列表&#xff0c;因为class是attribute,我们可以和其他attribute一样使用v-bind将它们和动态的字符串绑定。但是&#xff0c;在处理比较复杂的绑定时&#xff0c;通过拼接生成字符串是麻烦且易出错的。因此&#xf…...

Nestjs返回格式小结

在 NestJS 中&#xff0c;除了 text/event-stream&#xff08;用于 Server-Sent Events&#xff09;之外&#xff0c;还有多种格式的返回方式&#xff0c;具体取决于你的应用需求。以下是一些常见的返回格式及其示例&#xff1a; 1. JSON 格式 Get(json) getJsonResponse(Res…...

【力扣刷题实战】相同的树

大家好&#xff0c;我是小卡皮巴拉 文章目录 目录 力扣题目&#xff1a; 相同的树 题目描述 示例 1&#xff1a; 示例 2&#xff1a; 示例 3&#xff1a; 解题思路 题目理解 算法选择 具体思路 解题要点 完整代码&#xff08;C语言&#xff09; 兄弟们共勉 &#…...

Golang | Leetcode Golang题解之第515题在每个树行中找最大值

题目&#xff1a; 题解&#xff1a; func largestValues(root *TreeNode) (ans []int) {if root nil {return}q : []*TreeNode{root}for len(q) > 0 {maxVal : math.MinInt32tmp : qq nilfor _, node : range tmp {maxVal max(maxVal, node.Val)if node.Left ! nil {q …...

Zookeeper 对于 Kafka 的作用是什么?

大家好&#xff0c;我是锋哥。今天分享关于【Zookeeper 对于 Kafka 的作用是什么&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; Zookeeper 对于 Kafka 的作用是什么&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 ZooKeeper 在 Kafka…...

Thread类及线程的核心操作

一. Thread类的常见构造方法 1. Thread() Thread类无参的构造方法, 用于创建Thread类的实例对象. 2. Thread(String name) 带一个参数的Thread类构造方法, 创建一个线程对象, 并给其命名. [注]: 如果不专门给线程命名, 那么线程默认的名字就是Thread-0, Thread-1, Thread-…...

算法|牛客网华为机试11-20C++

牛客网华为机试 上篇&#xff1a;算法|牛客网华为机试1-10C 文章目录 HJ11 数字颠倒HJ12 字符串反转HJ13 句子逆序HJ14 字符串排序HJ15 求int型正整数在内存中存储时1的个数HJ16 购物单HJ17 坐标移动HJ18 识别有效的IP地址和掩码并进行分类统计HJ19 简单错误记录HJ20 密码验证…...

OpenAI低调发布多智能体工具Swarm:让多个智能体协同工作!

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;专注于分享AI全维度知识&#xff0c;包括但不限于AI科普&#xff0c;AI工…...

性能之光 年度电竞性能旗舰iQOO 13发布

2024年10月30日&#xff0c;被定义为“性能之光”的年度电竞性能旗舰——iQOO 13正式发布&#xff0c;售价3999元起。iQOO 13作为iQOO 品牌在性能上的又一次深入探索&#xff0c;它像是一束光&#xff0c;引领行业不断拉高性能上限&#xff0c;让用户看到更多的可能性。 iQOO …...

如何避免因不熟悉数据保护法规而受损

在当今数字化时代&#xff0c;数据保护法规的遵守对于企业至关重要。不熟悉新的数据保护法规会导致法律风险增加、财务损失、声誉受损、客户信任下降等多方面的负面影响。其中&#xff0c;法律风险增加尤为严重&#xff0c;因为不符合规定可能引发高额罚款和法律诉讼。企业若未…...

LLaMA Factory 核心原理讲解

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于大模型算法的研究与应用。曾担任百度千帆大模型比赛、BPAA算法大赛评委,编写微软OpenAI考试认证指导手册。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。授权多项发明专利。对机器学…...

Java题集练习5

Java题集练习5&#xff08;集合&#xff09; 1.三种集合差别&#xff0c;集合类都是什么&#xff0c;数据结构是什么&#xff0c;都什么时候用 三者关系 Set集合 Set接口是Collection接口的一个子接口是无序的&#xff0c;set中不包含重复的元素&#xff0c;也就是说set中不…...

操作系统学习笔记-2.3哲学家和管程问题

哲学家问题 问题描述 假设有五位哲学家围坐在一张圆桌旁&#xff0c;每位哲学家面前放有一盘意大利面&#xff0c;他们各自间隔放置一根叉子。哲学家的行为分为“思考”和“进餐”两种状态。为了进餐&#xff0c;哲学家需要同时拿起左手边和右手边的两根叉子。用餐结束后&…...

2023年信息安全工程师摸底测试卷

目录 1.密码算法 2.等级保护 3.密码学 4.安全评估 5.网络安全控制技术 6.恶意代码 7.身份认证 8.资产管理 9.密码分类 10.被动攻击 11.商用密码服务​编辑 12.超文本传输协议 13.数字水印技术 14.信息系统安全设计 15.重放攻击 16.信息资产保护 17.身份认证 …...

ReactOS系统中平衡二叉树。给定地址超导其所属区块MmFindRegion()

系列文章目录 PMM_REGION NTAPI MmFindRegion( PVOID BaseAddress, PLIST_ENTRY RegionListHead, PVOID Address, PVOID* RegionBaseAddress ); 宏函数 //给定地址找到其中所属区块 #define CONTAINING_RECORD(address,type,field) ((type FAR *\(PCHAR)(address)-(PCHAR)(&…...

基于TESSY的单元测试与分类树方法深入解析

在现代软件开发中,单元测试是确保软件质量和可靠性的关键步骤之一。特别是对于嵌入式软件,由于其应用环境的特殊性和高安全性要求,单元测试显得尤为重要。本文将基于《TESSY 用户手册》的内容,详细介绍如何使用TESSY 进行单元测试,并深入探讨分类树方法(Classification T…...

整理了一些大模型的课程,非常详细,大模型零基础入门到精通,收藏我这一篇就够了

目前有多个科普类的大模型课程&#xff0c;这些课程涵盖了从基础理论到实际应用的各个方面。以下是一些主要的科普类大模型课程&#xff1a;复旦大学“大模型开发与赋能”专题讲习班&#xff1a;由复旦大学计算机学院邱锡鹏教授带来的《大模型科普讲解》课程&#xff0c;通过深…...

区块链国赛题目--食品溯源(模块三)

区块链国赛题目–食品溯源(模块三) 任务 3-1:区块链应用前端功能开发 1.请基于前端系统的开发模板,在登录组件 login.js、组件管理文件components.js 中添加对应的逻辑代码,实现对前端的角色选择功能,并测试功 能完整性,示例页面如下: 具体要求如下: (1)有明…...

【Searxng】Searxng docker 安装

SearXNG将用户的查询请求分发至多个支持的搜索引擎&#xff0c;并收集返回的结果进行汇总处理。在这个过程中&#xff0c;它通过内置的过滤器功能屏蔽广告和其他不相关内容&#xff0c;确保搜索结果的纯净度。 一键部署 docker run \--name searxng \-p ????:8080 \-v ~/s…...

Java Lock/AQS ReentrantLock 源码

前言 相关系列 《Java & Lock & 目录》&#xff08;持续更新&#xff09;《Java & AQS & 目录》&#xff08;持续更新&#xff09;《Java & Lock/AQS & ReentrantLock & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Jav…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

渗透实战PortSwigger靶场:lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

网页端 js 读取发票里的二维码信息(图片和PDF格式)

起因 为了实现在报销流程中&#xff0c;发票不能重用的限制&#xff0c;发票上传后&#xff0c;希望能读出发票号&#xff0c;并记录发票号已用&#xff0c;下次不再可用于报销。 基于上面的需求&#xff0c;研究了OCR 的方式和读PDF的方式&#xff0c;实际是可行的&#xff…...