vue 模板语法值class操作

作者：代码大牛 | 2024-02-01 18:10:41

踩

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则返回true
                 if (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)中相同键的值。

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/54478