动态样式绑定(数组模式)

babywenever

已于 2023-12-02 13:38:20 修改

阅读量127

点赞数

文章标签：前端 javascript html

于 2023-11-29 19:52:11 首次发布

本文链接：https://blog.youkuaiyun.com/babywenever/article/details/134697782

版权

1-动态样式绑定可以是数组模式

数组中可以是string也可以是object不同的数据类型的组

<div class="demo" :class="[color,{red:attachRed}]"></div>

2-class的动态样式绑定操作有三种类型

string、object、array

string可以是任意的样式名称，但是启不启作用在于样式有没有定义

object主要掌握的是键名与键值的关系，键名是类名，键值是布尔值。如果布尔值为

true，那么键类的类名就超作用。否则将键名的类名从class中移除

array数组，数组中可以是string也可以是object不同的数据类型的组合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>变量与数组模式绑定</title>
        <style>
            .demo {
                width: 100px;
                height: 100px;
                background-color: gray;
                display: inline-block;
                margin: 10px;
            }

            .red {
                background-color: red;
            }

            .green {
                background-color: green;
            }

            .blue {
                background-color: blue;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <div class="demo"></div>
            <div class="demo" @click="attachRed=!attachRed"></div>
            <div class="demo" :class="{red:attachRed}"></div>
            <div
                class="demo"
                @click="attachRed = !attachRed"
                :class="divClasses"
            ></div>
            <!-- TODO:通过改变input的值可以设置div的样式，改变值的范围是red/green/blue-->
            <input type="text" v-model="color"/>
            <!-- TODO:尝试设置数组形式，这样就是多样式操作 -->
            <!-- 
                多个动态样式的绑定操作，可以考虑数组形式
                1.数组当中 的元素类型仍旧可以是对象。仍旧保持键是类名，键值是布尔值
                2.数组当中的元素可以是字符串变量，而它的值一般是响应式数据中声明的样式变量，如果
                变量所对应的值在样式中已经存在，那么样式则会起作用。否则的话桃算样式被加入到
                class当中，样式的效果也是没有的。
             -->
             <!-- 
                class的动态样式绑定操作有哪几种数据类型?
                string、object、array 
                string可以是任意的样式名称，但是启不启作用在于样式有没有定义
                object主要掌握的是键名与键值的关系，键名是类名，键值是布尔值。如果布尔值为
                true，那么键类的类名就超作用。否则将键名的类名从class中移除
                array数组，数组中可以是string也可以是object不同的数据类型的组合
              -->
            <div class="demo" :class="[color,{red:attachRed}]"></div>
            
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    attachRed: false,
                    color:"green"
                },
                computed: {
                    divClasses: function () {
                        return {
                            red: this.attachRed,
                            blue: !this.attachRed,
                        };
                    },
                },
            });
        </script>
    </body>
</html>