Vue 响应式渲染 - Vue3 Class和style_vue3根据响应式数据设置class-CSDN博客

本文链接：https://blog.csdn.net/json_ligege/article/details/145513001

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue响应式渲染 - Vue3 Class和style

Vue3 class和style

引用Vue3版本在多个class之间切换

初始化方式

使用Vue3版本的，Vue初始化方式与2不同。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title1 {
            color: red;
        }

        .title2 {
            font-weight: bold;
        }

        .title3 {
            background: #ccc;
        }

        .title4 {
            border: 2px solid #000;
        }
    </style>
    <script src="../lib/vue.next.js"></script>
</head>
<body>
    <div id="box">
        {
  
  {10+20}}
    </div>

    <script>
        Vue.createApp().mount("#box")
    </script>
</body>
</html>

初始化方式修改

Data设置改为函数式设置（为了保护组件间变量命名不冲突）。

示例如下：

let obj = {
    data() {
        return {
            myname:'张三'
        }
    },
    methods:{

    }
}
Vue.createApp(obj).mount("#box")

动态切换class-对象写法

设置元素

在box的盒子中设置一个动态绑定类的div，示例如下：

<div id="box">
    <div :class="classobj" @click="handleAdd()">动态切换class-对象写法</div>
</div>

设置变量

使用函数式

let obj = {
    data() {
        return {
            myname:'张三',
            classobj: {
                title1:true,
                title2:true,
                title3:false,
            }
        }
    },

后期动态添加属性

在div上增加一个点击事件，点击动态添加一个类。示例如下：

<div id="box">
    <div :class="classobj" @click="handleAdd()">动态切换class-对象写法</div>
</div>

<script>
    let obj = {
        data() {
            return {
                myname:'张三',
                classobj: {
                    title1:true,
                    title2:true,
                    title3:false,
                }
            }
        },
        methods:{
            handleAdd() {
                this.classobj.title4 = true
            }
        }
    }
    Vue.createApp(obj).mount("#box")
</script>