vue class绑定对象和数组简化

最新推荐文章于 2024-07-06 21:38:14 发布

都挺好，刚刚好

最新推荐文章于 2024-07-06 21:38:14 发布

阅读量341

点赞数

分类专栏： vue2 文章标签：前端

本文链接：https://blog.csdn.net/seimeii/article/details/124446588

版权

vue2 专栏收录该内容

54 篇文章 4 订阅

订阅专栏

1.HTML

    <div v-bind:class='arrClasses'>class绑定值得简化操作-数组</div>
    <div v-bind:class='objClasses'>class绑定值得简化操作-对象</div>

2.style

  <style>
        .active {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        .error {
            background-color: orange;
        }

        .test {
            color: blue;
        }

        .base {
            font-size: 28px;
        }
    </style>

3.script

        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                activeClass: 'active',
                errorClass: 'error',
                isTest: 'true',
                arrClasses: ['active','error'],
                objClasses: {
                    active: true,
                    error: true
                }
            },

4.示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式绑定语法细节</title>
    <style>
        .active {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        .error {
            background-color: orange;
        }

        .test {
            color: blue;
        }

        .base {
            font-size: 28px;
        }


    </style>
</head>
<body>
    <div id="app">
        <!-- active的样式为 true 或 false -->
        <div v-bind:class="[activeClass,errorClass,{test: isTest}]">测试样式</div>
        <div v-bind:class='arrClasses'>class绑定值得简化操作-数组</div>
        <div v-bind:class='objClasses'>class绑定值得简化操作-对象</div>
        <div class="base" v-bind:class="objClasses">默认class(base样式)</div>
        <!-- 默认的class样式base 和 objClasses样式 同时起作用 -->
        <button v-on:click='handle'>切换</button>
    </div> 
    <script src="js/vue.js"></script>
    <script>
        /*
            样式绑定相关语法细节：
            1. 对象绑定和数组绑定可以结合使用 test样式举例 [activeClass,errorClass,{test: isTest}]
            2. class绑定的值可以简化操作, 将类名放到一个数组里，绑定数据就可以了
            3. 会保留默认的class样式
        */ 
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                activeClass: 'active',
                errorClass: 'error',
                isTest: 'true',
                arrClasses: ['active','error'],
                objClasses: {
                    active: true,
                    error: true
                }
            },
            methods: {
                handle: function() {
                    // 控制isActive的值在true和false之间进行切换 添加active样式 或 不添加active样式
                    // this.activeClass = '';
                    // this.errorClass = '';
                    // this.isTest = false;

                    // 当点击切换得时候，会调用该方法，去掉objClasses中的error样式
                    this.objClasses.error = false;
                }
            }
        })
    </script>
</body>
</html>