vue 模板语法值class操作

class.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>class</title><!-- 确保引入正确的Vue版本库,下面只是示例,需要替换为实际可工作的CDN地址 --><script src="../vue 初识/vue.js"></script><style>.c1{color: red;background: #03e9f4;}.c2{font-family: "Times New Roman";font-size: 33px;font-style: italic;}.c3{text-align: center;}</style></head>
<body>
<div id="cp"><!--对click进行动作监听,一旦有动作则触发styleC*函数动作--><p><button @click="styleC1">c1样式</button></p><p><button @click="styleC2">c2样式</button></p><!-- 使用动态类和数据绑定来显示内容 --><p :class="clas">{{wz}}</p><!--vue显式表达,优先级最高--><p :class="{c1:true,c2:false}">{{wz}}</p><!--支持使用数组的方式进行样式对象的使用--><p :class="[{c1:true,c2:true},{c3:true}]">{{wz2}}</p>
</div><script>const app = {data() {return {clas: {c1:false,c2:true},wz: "hello world!!",wz2:"yuan"}},/*定义方法methods*/methods:{styleC1(){//如果结果为真则返回false,再次点击如果为flase则返回trueif (this.clas.c1){this.clas.c1=false}else{this.clas.c1=true}},styleC2(){if (this.clas.c2){this.clas.c2=false}else{this.clas.c2=true}}}}vm=Vue.createApp(app).mount('#cp')// 打印日志console.log("vm",vm)
</script>
</body>
</html>

对该代码可以进行优化:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>class</title><!-- 确保引入正确的Vue版本库,下面只是示例,需要替换为实际可工作的CDN地址 --><script src="../vue 初识/vue.js"></script><style>.c1{color: red;background: #03e9f4;}.c2{font-family: "Times New Roman";font-size: 33px;font-style: italic;}.c3{text-align: center;}</style></head>
<body>
<div id="cp"><!--对click进行动作监听,一旦有动作则触发styleC*函数动作--><p><button @click="styleC1">c1样式</button></p><p><button @click="styleC2">c2样式</button></p><!-- 使用动态类和数据绑定来显示内容 --><p :class="clas">{{wz}}</p><!--vue显式表达,优先级最高--><p :class="{c1:true,c2:false}">{{wz}}</p><!--支持使用数组的方式进行样式对象的使用--><p :class="[{c1:true,c2:true},{c3:true}]">{{wz2}}</p>
</div><script>const app = {data() {return {clas: {c1:false,c2:true},wz: "hello world!!",wz2:"yuan"}},/*定义方法methods*/methods:{styleC1(){this.clas.c1 = !this.clas.c1},styleC2(){this.clas.c2 = !this.clas.c2}}}vm=Vue.createApp(app).mount('#cp')// 打印日志console.log("vm",vm)
</script>
</body>
</html>

使用Vue进行了一段简单的应用开发,包括用Vue处理类绑定和事件监听。对于您提出的关于 <p :class="{c1:true,c2:false}">{{wz}}</p> 中类(class)绑定的优先级问题,实际上在这种情况下,提到的“优先级”概念需要有所区分。

在Vue中,:class 的使用方式决定了类是如何动态绑定到元素上的。在案例中:

  1. <p :class="clas">{{wz}}</p> 这里 clas 是根据组件的数据(data)动态变化的,这意味着其实际的类绑定是依赖于组件状态(这里是 clas.c1clas.c2 的值)。

  2. <p :class="{c1:true,c2:false}">{{wz}}</p> 直接在模板中定义了一个静态的对象 {c1:true,c2:false},这意味着 c1 类始终会被绑定到该元素上,而 c2 类则不会。

在这种情况下,说哪个“优先级”更高可能不是完全准确的,因为它们控制的是不同元素的类。每个绑定只控制它所绑定元素的类,根据应用状态(通过方法修改)来动态改变第一个 <p> 标签的类,而第二个 <p> 标签的类始终不变(因为它是硬编码的,不会受到组件状态的影响)。

然而,如果是在相同的元素上同时使用这两种绑定方式,Vue会尽量合并这些绑定。如果有冲突,对象绑定形式(如::class="{c1:true,c2:false}")中硬编码的值优先于通过数据决定的绑定值。这是因为Vue将尝试在内部合并这些类,但直接在模板中定义的类的具体值(在这里是 {c1:true,c2:false})会直接覆盖数据(data)中相同键的值。

所以,如果在同一元素上有冲突的情况,模板内直接定义的绑定方式在效果上相当于具有“更高的优先级”

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

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

相关文章

低代码核心思想:插件化开发(vue3实现)

我们在开发一些组件插件的时候&#xff0c;需要动态的从外部去注入第三方插件 1. 如何做一个插件化的项目&#xff0c;模拟代码如下 // 插件设计内容 // 1. 插件底座 // 2. 插件注册方式 // 3. 调用插件 class Calculator{// 插件底座plugins []constructor(){}// 注册use(p…

SpringCloud LoadBalancer

SpringCloud LoadBalancer 1.什么是LoadBalancer LoadBalancer&#xff08;负载均衡器&#xff09;是一种网络设备或软件机制&#xff0c;用于分发传入的网络流量负载请求到多个后端目标服务器上&#xff0c;从而实现系统资源的均衡利用和提高系统的可用性和性能。 负载均衡器…

(Rust)LeetCode 热题 100-两数之和

给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回…

【Tomcat与网络4】Tomcat的连接器设计

目录 1 如何设计一个灵活可靠的连接器 2 主要组件介绍 在上一篇&#xff0c;我们介绍了Tomcat提供服务的整体结构&#xff0c;本文我们一起来看一下Tomcat的连接器的设计。 在前面我们提到Tomcat主要完成两个功能&#xff1a; 处理 Socket 连接&#xff0c;负责网络字节流与…

wifi配网(esp8266和esp32)-http get和post方式

wifi配网(esp8266和esp32)-http get和post方式 通过http get和post方式来给esp芯片配网 步骤&#xff1a; 开机&#xff0c;指示灯亮起后(需要灯闪烁3下后)&#xff0c;需在3s内&#xff08;超过3s则会正常启动&#xff09;&#xff0c;按一下按键&#xff08;注&#xff1a;切…

Springboot做查询数据库某个表的数据时,后台一切正常前台显示不了数据

当我在用springboot做项目的时候查询整个表的数据或者条件查询的时候发现我的后台功能一切正常但是我的前台界面就是显示不了数据&#xff0c;这个问题解决也很简单&#xff0c;就是需要我们平时多加注意&#xff0c;不要漏代码&#xff01;&#xff01;&#xff01; Builder …

Visual Studio 2022 打开“程序包管理器控制台”失败

Visual Studio 2022 打开“程序包管理器控制台”失败 昨天下午&#xff0c;正在用Visual studio 2022写代码&#xff0c;当使用EF core 做数据迁移时&#xff0c;需要用到“程序包管理器控制台”&#xff0c;打开失败&#xff0c;前一秒还好好的&#xff0c;怎么突然就用不了了…

第十二届“中关村青联杯”全国研究生数学建模竞赛-F题:最优旅游路线规划问题研究

目录 摘 要: 一. 问题重述 1.1. 问题背景 1.2 问题提出 二. 问题分析

互联网加竞赛 基于深度学习的人脸性别年龄识别 - 图像识别 opencv

文章目录 0 前言1 课题描述2 实现效果3 算法实现原理3.1 数据集3.2 深度学习识别算法3.3 特征提取主干网络3.4 总体实现流程 4 具体实现4.1 预训练数据格式4.2 部分实现代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 毕业设计…

力扣136、只出现一次的数字(简单)

1 题目描述 图1 题目描述 2 题目解读 在非空整数数组nums中&#xff0c;有一个元素只出现了一次&#xff0c;其余元素均出现两次。要求找出那个只出现一次的元素。 3 解法一&#xff1a;位运算 位运算&#xff0c;是一种非常简便的方法。 3.1 解题思路 异或运算&#xff0c;有…

CPN故障诊断(MATLAB)

CPN(Colored Petri Net,彩色Petri网)是在传统Petri网的基础上进行扩展的高级Petri网。它在故障诊断领域有着广泛的应用。 CPN故障诊断的主要思想和步骤如下: 建模:根据系统的结构和功能,采用CPN构建系统的模型。将系统不同组件表示为网的位置,数据/信号流表示为网的转换,故障…

MySQL中的binlog、redolog和undolog的区别

目录 binlog&#xff08;二进制日志&#xff09; redolog&#xff08;重做日志&#xff09; undolog&#xff08;回滚日志&#xff09; 总结 在MySQL数据库中&#xff0c;为了保证数据的一致性和可靠性&#xff0c;有三种日志文件起着关键作用&#xff1a;binlog&#xff0…

如何通过Hive/tez与Hadoop的整合快速实现大数据开发

一、Hive的功能 Hive是基于Hadoop的一个外围数据仓库分析组件&#xff0c;可以把Hive理解为一个数据仓库&#xff0c;但这和传统的数据库是有差别的。 传统数据库是面向业务存储&#xff0c;比如 OA、ERP 等系统使用的数据库&#xff0c;而数据仓库是为分析数据而设计的。同时…

4D毫米波雷达分类和工程实现

4D毫米波目标检测信息丰富&#xff0c;可获得目标3维位置信息、径向速度vr和rcs等&#xff0c;能够对目标准确分类。 4D毫米波和激光做好时空同步&#xff0c;可以用激光目标给4D毫米波做标注&#xff0c;提升标注效率。 1 激光用做4D毫米波分类真值 128线激光推理的结果作为4…

js遍历数组和对象的常用方法有哪些?

在JavaScript中&#xff0c;我们有很多遍历数组和对象的方法。以下是一些常用的方法&#xff1a; 遍历数组的方法&#xff1a; for循环&#xff1a;这是最基本的方法&#xff0c;通过索引来遍历数组 for(let i 0; i < array.length; i) { console.log(array[i]); }2.fo…

ChatGPT学python: 用json文件传参

目录 json语法最简陋版python解析语法小结 json语法最简陋版 param.json [{"Table_name": "table1","Event_name_colum": 4,"update_colum": 9},{"Table_name": "table2","Event_name_colum": 3,&quo…

Windows编程入门-窗口控件-资源操作

window控件&#xff1a; 控件是常见的窗口上的交互元素例如&#xff1a;一个按钮&#xff0c;一个复选框&#xff0c;一个列表框等。 当控件的特定功能被触发后&#xff0c;会主动发送消息通知父窗口&#xff0c;父窗口可以通过发送消息给控件控制控件的行为。 控件的本质是一个…

[AG32VF407]国产MCU+FPGA Verilog编写控制2路gpio输出不同频率方波实验

视频讲解 [AG32VF407]国产MCUFPGA Verilog编写控制2路gpio输出不同频率方波实验 实验过程 根据原理图&#xff0c;选择两个pin脚作为输出 修改VE文件&#xff0c;clk选择PIN_OSC&#xff0c;使用内部晶振8Mhz&#xff0c;gpio使用PIN_51和52&#xff0c;pinout是数组 添加pll…

qt学习:多媒体Multimedia摄像头

目录 注意 头文件 模块 步骤 实例 定义一个摄像头对象和一个摄像头拍照对象 在构造函数里获取当前电脑上所有可以用的摄像头存入链表 启动摄像头按钮点击事件 退出按钮点击事件 拍照按钮点击事件 保存图片槽函数定义和实现 摄像头在Qt Multimedia多媒体模块里 QCam…

Uniapp小程序端打包优化实践

背景描述&#xff1a; 在我们最近开发的一款基于uniapp的小程序项目中&#xff0c;随着功能的不断丰富和完善&#xff0c;发现小程序包体积逐渐增大&#xff0c;加载速度也受到了明显影响。为了提升用户体验&#xff0c;团队决定对小程序进行一系列打包优化。 项目优化点&…