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

vue 模板语法值class操作

news 2025/7/18 13:59:04

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处理类绑定和事件监听。对于您提出的关于 {{wz}} 中类(class)绑定的优先级问题，实际上在这种情况下，提到的“优先级”概念需要有所区分。

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

{{wz}} 这里 clas 是根据组件的数据(data)动态变化的，这意味着其实际的类绑定是依赖于组件状态（这里是 clas.c1 和 clas.c2 的值）。
{{wz}} 直接在模板中定义了一个静态的对象 {c1:true,c2:false}，这意味着 c1 类始终会被绑定到该元素上，而 c2 类则不会。

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

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

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

vue 模板语法值class操作

相关文章：

vue 模板语法值class操作

MySQL的原生API实现插入数据后在可视化工具上不显示的问题解决

Blender教程（基础）-内插面、分离、环切、倒角-08

Unity 自动轮播、滑动轮播

纯html+js+css个人博客

二百二十一、HiveSQL报错：return code 2 from org.apache.hadoop.hive.ql.exec.mr.MapRedTask

JavaEE学习笔记 2024-1-25 --VUE的入门使用

php-fpm详细讲解

小白水平理解面试经典题目LeetCode 455 Assign Cookies【Java实现】

uniapp 问题汇总-问题数(2)

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

python coding with ChatGPT 打卡第15天| 二叉树：翻转二叉树、对称二叉树

Python（19）Excel表格操作Ⅰ

HiveSQL题——聚合函数(sum/count/max/min/avg)

计算机是什么做的

C++多线程1(复习向笔记)

代理IP在游戏中的作用有哪些？

SVN Previous operation has not finished； run ‘cleanup‘ if it was interrupted

MATLAB知识点：MATLAB的文件管理

【深度学习】MNN ImageProcess处理图像顺序，逻辑，均值，方差

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

day52 ResNet18 CBAM

3.3.1_1 检错编码（奇偶校验码）

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

leetcodeSQL解题：3564. 季节性销售分析

探索Selenium：自动化测试的神奇钥匙

MyBatis中关于缓存的理解

【UE5 C++】通过文件对话框获取选择文件的路径