Vue修改class样式

io无心

已于 2022-06-27 11:09:22 修改

阅读量3.5k

点赞数 1

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

于 2022-06-27 09:51:31 首次发布

需转载请联系QQ:846581636

本文链接：https://blog.csdn.net/LYXlyxll/article/details/125477442

版权

web前端同时被 2 个专栏收录

42 篇文章 6 订阅

订阅专栏

Vue

35 篇文章 0 订阅

订阅专栏

class样式

写法：class="xxx" xxx可以是字符串，对象，数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式
:style='{fontSize:xxx}'其中xxx'是动态值。
:style=‘{a,b}’其中a，b是样式对象。

动态绑定类样式

<div id="root">
    <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <h1 v-bind:class="myStyle" @click="changeColor">Hello world</h1>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            myStyle: "violet"
        },
        methods: {
            changeColor() {
                this.myStyle = this.myStyle === "violet" ? "cyan" : "violet";
            }
        },
    })
</script>

数组的方式绑定样式

<head>
<style>
    .fontColor {
        color: violet;
    }

    .backgroud {
        background-color: cyan;
    }

    .border {
        border: 2px solid red;
    }
</style>

</head>

<body>

<div id="root">
    <!-- 如果样式不确定可以写到一个数组中，数组变化时样式会自动变化 -->
    <h1 v-bind:class="myStyleArr" @click="changeColor">Hello world</h1>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            myStyleArr: ["fontColor", "backgroud", "border"]
        },
        methods: {
            changeColor() {
                // 数组变化时样式会自动刷新
                this.myStyleArr.shift();
            }
        },
    })
</script>

对象的方式绑定样式

<head>
    <style>
        .fontColor {
            color: violet;
        }

        .backgroud {
            background-color: cyan;
        }

        .border {
            border: 2px solid red;
        }
    </style>

</head>

<body>

<div id="root">
    <!-- 如果样式不确定可以写到一个数组中，数组变化时样式会自动变化 -->
    <h1 v-bind:class="classObj" @click="changeColor">Hello world</h1>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            classObj:{
                //属性名要和上面的样式名对应
                fontColor:true,
                backgroud:false,
                border:true
            }
        }
    })
</script>

</body>

style绑定对象的方式确定样式

<div id="root">
    <h1 v-bind:style="styleObj">Hello world</h1>
    <!-- 
        或者  <h1 v-bind:style="{fontSize: '90px'}">Hello world</h1>
    -->
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            styleObj: {
                //font-size,‘-’要去掉，第二个单词大写。
                fontSize: '90px',
                color: "red",
                backgroundColor: "cyan"
            }
        }
    })
</script>