23 Class与Style动态绑定

最新推荐文章于 2023-02-15 14:08:28 发布

学习总不晚

最新推荐文章于 2023-02-15 14:08:28 发布

阅读量216

点赞数

分类专栏： Vue 文章标签： Class 的动态绑定

本文链接：https://blog.csdn.net/u013472738/article/details/100429181

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

划重点

v-bind 绑定机制的使用
在computed 中动态操作绑定的样式Class
computed中的方法有返回值
对于class可以定义一个默认的样式；同时也可以定义一个需要动态变化的对应的样式名称

土豆肉片


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>class 通过方法绑定返回需要显示的对应绑定的 class 样式</title>
    <script src="./lib/vue-2.6.10.js"></script>

    <style>
        /*  背景样式1  */
        .classType1 {
            background-color: rgb(48, 79, 163);


        }

        /* 背景样式2 */
        .classTypeError {
            background-color: brown;

        }

        /*  文本样式1 */
        .classText1 {
            font-size: 1rem;
        }

        /* 文本样式2 */
        .classTextError {
            font-size: 2rem
        }

        .text-danger {
            font-style: italic
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-bind缩写是（ : ） -->
        <div class="text-danger" :class="checkClassChange" @click="ChangeType" style="width:50%;margin: auto">{{ msg }}</div>

    </div>
    <script>

// 说明：这里用的几个知识点；
//1:对上面?div中的class： text-danger 是默认的不会变化的样式：倾斜字体设置 ；；；
//  v-bind:class是绑定的样式：通过computed动态监听改变的方法：checkClassChange 获取返回的样式；
//checkClassChange ：返回一个或者多个 样式都是可以的；；；这里我返回了两个样式：通过数组的形式返回?

//下面?   定义的属性 dataMsg可以直接用在Vue--> data{...} 中； 并且 如果是在Vue中；那么对data中的值重新赋值的话：可以使用 vm 也可以使用：this
//但是如果在Vue外部使用 data中的参数的话；那么需要使用 使用 vm 表示其环境 :如 new Vue(...)逻辑外面下面?的 vm.error = 1 ; 等价：dataMsg.error = 1 ;并且不管什么方式改变error的值那么vm和dataMsg都是同时对应改变的



        var dataMsg = {
            type1: true,
            error: null,
            msg: '通过v-bind 绑定class 动态改变文字的大小和背景颜色（一个常用且强大的功能）'
        }
        // dataMsg.error =1 ;
        var vm = new Vue({
            el: '#app',
            data: dataMsg,
            methods: {
                ChangeType: function () {
                    // 这里使用 vm 和 this 都是对应的 Vue的环境 ；； 但是如果在 Vue外面重新定义data中的值则需要使用：
                    vm.type1 = !vm.type1;
                    this.error = '1';
                }
            },
            computed: {//方法有返回值：return  ; 可以监听动态改变 和watch 功能一样
                checkClassChange: function () {
                    return [
                        this.type1 ? 'classType1' : 'classTypeError',
                        this.error ? 'classText1' : 'classTextError'
                    ]
                    //    [
                    //         active:this.isActive && !this.error,
                    //             'text-danger':this.error && this.error.type === 'fatal'
                    //         // this.type1 ? 'classType1' : 'classTypeError'+this.error ? 'classText1' : 'classTextError';
                    //         ]
                }


            }
        })


        // vm.error = 1 ;//
    </script>

</body>

</html>