绑定class样式和绑定style样式

一枕槐安1

已于 2023-05-01 14:38:46 修改

阅读量291

点赞数

分类专栏：前端文章标签：前端 javascript vue.js

于 2022-07-13 21:01:25 首次发布

本文链接：https://blog.csdn.net/weixin_64770583/article/details/125772468

版权

前端专栏收录该内容

24 篇文章 3 订阅

订阅专栏

css代码

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .basic {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        margin: 20px;
    }

    .red {
        background-color: red;
    }

    .blue {
        background-color: blue;
    }

    .yellow {
        background-color: yellow;

    }

    .radius {
        border-radius: 10px;
    }

    .widthboreder {
        border: 10px solid #000;
    }
</style>

html代码

绑定class样式用的是v-bind:class="xxx" 简写为 (:class="xxx"） xxx是data中的属性可以是数组也可以是对象



<body>
    <div class="box">
        <!-- 字符串写法 适用于样式类名不确定，需要动态指定 -->
        <div class="basic" :class="myColor" @click="changeColor">{{name}}</div>
        <!-- 数组写法 适用于要绑定样式个数不确定，类名也不确定 -->
        <div class="basic" :class="colorArr">{{name}}</div>
        <!-- 数组写法 适用于要绑定样式个数确定，类名也确定 但要动态决定-->
        <div class="basic" :class="colorObj">{{name}}</div>
        <!-- 内联 -->
        <div class="basic" :style="styleObj1">{{name}}对象</div>
        <div class="basic" :style="[styleOb1,styleObj2]">{{name}}style数组</div>
    </div>
</body>

js代码


<script>
    // 取消一个开发者提示
    Vue.config.productionTip = false;

    // 创建实例
    new Vue({
        el: '.box',
        data: {
            name: '刘德华',
            myColor: 'red',
            colorArr: ['blue', 'radius'],
            colorObj: {
                red: false,
                blue: false,
                yellow: true,
                radius: true
            },
            styleObj1: {
                // 属性名必须是css中使用的名字
                fontSize: '30px',
            },
            styleObj2: {
                backgroundColor: 'orange',
            }
        },
        methods: {
            changeColor() {
                const arr = ['red', 'blue', 'yellow'];
                this.myColor = 'blue',
                    console.log(this.myColor);
            }
        }
    })
</script>