Vue动态切换class属性：数组法、对象法

最新推荐文章于 2024-06-20 13:56:26 发布

陌一一

最新推荐文章于 2024-06-20 13:56:26 发布

阅读量3.1k

点赞数 1

分类专栏： web前端开发文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127946112

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

需求：在style里创建好不同的属性，后期可以给标签动态绑定这些属性，也可以实现属性的切换
方法：对象法、数组法

事先创建好class属性：

<style>
        .aa{
            
        }
        .bb{
            
        }
        .cc{

        }
</style>

对象法：

<body>
    <div id="box">
        <div :class="classobj">动态切换class属性</div>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                classobj:{
                    aa:true,
                    bb:true,
                    cc:false
                }
            }
        })
    </script>
</body>

给在class属性值后面放上对象变量，对象变量在data里定义，里面放着要切换的class属性，想给标签绑定该属性就把它的value改成true，解绑就写false；

结果：

数组法：

<body>
    <div id="box">
        <div :class="classarr">动态切换class属性</div>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                classarr:["aa"]
            },
        })
    </script>
</body>

结果：

动态新增class属性：

对象法：
vue2不支持对象法直接新增属性的：

vm.classobj.dd = true//vue2不支持

结果：

结果发现div并没有dd这个class属性，所以说对象法是不支持vue2直接新增属性的；
原因是没有进行拦截，定义的属性和变量都是会被拦截才能正常的起作用，按照上面这个方式，是不会被拦截的，所以不支持；
下图展示了，定义好的属性被拦截的样子：

解决办法：

vue2解决方案：使用Vue.set（对象，属性，true）进行新增class属性；

Vue.set(vm.classobj,"dd",true)

结果：

vue3：支持动态增加属性的拦截；

数组法：
数组的方法好用，数组方法属性拦截不到，
数组法允许通过vue2法直接动态新增class属性：
用vue2方式给数组法新增class属性：

vm.classarr.push("cc")//新增class属性

结果：

数组方法不拦截：

陌一一

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue动态切换class属性：数组法、对象法

Vue动态切换class属性：数组法、对象法
复制链接

扫一扫

专栏目录