动态样式绑定(对象模式)

babywenever

已于 2023-11-29 20:03:59 修改

阅读量83

点赞数

文章标签：前端 javascript

于 2023-11-29 19:50:37 首次发布

本文链接：https://blog.csdn.net/babywenever/article/details/134697716

版权

1-动态样式绑定需要写成 :class="{ red:attachRed }"

class前需要加冒号，:是v-bind的缩写，意为需要用到data里的数据，class里面是对象。

键名需要在style里定义，不然没有样式。键值是boolean,为true时类名起效果，false时移除类名

<div :class="{ red:attachRed }" class="demo"></div>

2-class里也可以是属性计算

属性计算最终返回的class绑定内容也是对象，键名是类名，键值是布尔值，可以是多个属性节点的操作

相当于 :class="{red:attachRed,blue:!attachRed}"

<div :class="divClasses" class="demo"></div>

computed:{
 // 属性计算有函数模式和对象模式，如果是对象模式则只是get操作
 divClasses(){
     return {
         red:this.attachRed,
         blue:!this.attachRed
       }
  }
}

<!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">
            {{ attachRed }}
            <!-- 传统的类样式绑定，静态类样式绑定 -->
            <div class="demo"></div>
            <!-- TODO:理解动态样式绑定与对象绑定时的键名键值设置内容 -->
            <!-- toggle切换 -->
            <div class="demo" @click="attachRed =! attachRed"></div>

            <!-- 如果attachRed为false则会从class移除 -->
            <!-- <div class=""></div> -->
            <!-- <div :class="attachRed"></div>      -->

            <!-- 可以进行class的静态样式类的设定，也可以再次进行动态样式的设定 -->
            <!-- {red:attachRed}:动态样式   class="demo":静态样式 -->
            <!-- 动态的类样式绑定操作，目前是对象模式，并且对象的键名是所定义的类名，
                而对象的键值是布尔值，如果布尔值为true，那么键类的类名就起作用，
                否则将键名的类名从class中移除 -->
            <!-- 样式的类名必须是定义了的，否则没有样式 { yellow:attachRed }不起效果 -->
            <div :class="{ red:attachRed }" class="demo"></div>

            <!-- 属性计算最终返回的class绑定内容也是对象，键名是类名，键值是布尔值，可以是多个属性节点的操作 -->
            <div :class="divClasses" class="demo"></div>

            <p>{{divClasses}}</p>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    attachRed:false
                },
                computed:{
                    // 属性计算有函数模式和对象模式，如果是对象模式则只是get操作
                    divClasses(){
                       return {
                        red:this.attachRed,
                        blue:!this.attachRed
                       }
                    }
                }
            });
        </script>
    </body>
</html>

babywenever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
动态样式绑定(对象模式)

键名需要在style里定义，不然没有样式。键值是boolean,为true时类名起效果，false时移除类名。class前需要加冒号，:是v-bind的缩写，意为需要用到data里的数据，class里面是对象。属性计算最终返回的class绑定内容也是对象，键名是类名，键值是布尔值，可以是多个属性节点的操作。相当于 :class="{red:attachRed,blue:!
复制链接

扫一扫