Vue修改class样式

无

io无心

3618人浏览 · 2022-06-27 09:51:31

io无心 · 2022-06-27 09:51:31 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^