绑定样式 class与style

最新推荐文章于 2022-10-19 14:29:17 发布

小强打不死、

最新推荐文章于 2022-10-19 14:29:17 发布

阅读量264

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_71181899/article/details/125822559

版权

这篇博客介绍了Vue.js中动态绑定class和style的方法，包括字符串、对象和数组的使用方式。通过`:class`和`:style`指令，可以实现根据数据动态地改变元素的样式和类名。例如，字符串适用于不确定的类名，对象适用于多个不确定的样式或类，而数组则用于确定数量但不确定是否使用的样式或类。示例代码展示了如何在实际应用中结合数据来切换和设置元素的样式及类。

摘要由CSDN通过智能技术生成

1. class样式

写法：class='xxx' xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。

对象写法使用于：要绑定多个样式，个数不确定，名字也不确定

数组写法适用于；要绑定多个样式，个数确定，名字也确定，但是不确定用不用的时候

2. style样式

：style="{fontSize:xxx}"其中xxx是动态值。

：style='[a,b]'其中a、b是样式对象

3.示例：

 <div id="root">
        <!-- 绑定class样式--字符串写法 适用于：样式的类名不确定，需要登台指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br>
        <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div><br>
        <!-- 绑定class样式--对象写法，适用于：要绑定的样式确定丶名字也确定，但是要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div><br>

        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObj">你好</div> <br>
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="[styleObj,styleObj2]">你好</div>

    </div>

 <script>
        Vue.config.productionTip = false // 以阻止 vue 在启动时生成生产提示。

        new Vue({
            el: '#root',
            data: {
                name: '清华',
                mood: 'normal',
                classArr: ['qinghua1', 'qinghua2', 'qinghua3'],
                classObj: {
                    qinghua1: false,
                    qinghua2: false
                },
                styleObj: {
                    fontSize: '40px',
                    color: 'red'
                },
                styleObj2: {
                    backgroundColor: 'orange'
                }
            },

            methods: {
                changeMood() {
                    const arr = ['happy', 'sad', 'normal']
                    const index = Math.floor(Math.random() * 3)
                    this.mood = arr[index]
                }
            },
        })
    </script>