Vue 响应式渲染 - Vue2 Class和style

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

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

Vue2 Class和style

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

动态切换class-对象

title1、title2、title3都是style中设置的类，

在vue的data中定义一个变量，

来对div进行类的批量赋值。

示例如下：

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

        .title2 {
            font-weight: bold;
        }

        .title3 {
            background: #ccc;
        }
    </style>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <div :class="classobj">动态切换class-1-对象</div>
    </div>
    <script>
        let vm = new Vue({
            el:'#box',
            data:{
                classobj: {
                    title1:true,
                    title2:true,
                    title3:false,
                }
            }
        })
    </script>
</body>
</html>

添加新类

在控制台通过定义的vm添加新的类。

示例如下：

后期(临时)添加的类，不会拦截，无法侦听到。

示例如下：

如何解决方案

Vue2 Vue.set(目标对象，属性，true)

Vue3 支持动态增加属性的拦截。

动态切换class-数组

使用数组方式动态切换div的class，示例如下：

<!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.js"></script>
</head>
<body>
<div id="box">
    <div :class="classobj">动态切换class-1-对象</div>
    <div :class="classarr">动态切换class-2-数组</div>
</div>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            classobj: {
                title1: true,
                title2: true,
                title3: false,
            },
            classarr: ["title1", "title4"]
        }
    })
</script>
</body>
</html>

增加类方式

这时想新增一个类，如果操作，示例如下：

动态切换style-对象

通过vue动态绑定div的行内样式，就可以通过对象方式动态切换style。

示例如下：

<div :style="styleobj">动态切换style-1-对象</div>

在data中设置变量

设置styleobj变量，使用对象方式，在其中设置属性时需注意使用驼峰语法，

示例如下：

styleobj: {
    backgroundColor:'blue'
}

动态添加底层不支持

Vue2 解决方案

使用Vue.set(vm.styleobj, "fontSize", "30px")

示例如下：

增加元素

在页面增加div。示例如下：

<div :style="stylearr">动态切换style-2-数组</div>

在data中设置变量，如下：

动态添加样式

vm.stylearr.push({fontSize:"30px"})

总结

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