vue-5——样式绑定

最新推荐文章于 2024-07-16 17:20:09 发布

Feliks.

最新推荐文章于 2024-07-16 17:20:09 发布

阅读量100

点赞数

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

本文链接：https://blog.csdn.net/qq_47770336/article/details/124928963

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

class与style的绑定
完整demo

class与style的绑定

<!-- 绑定样式:
        1.class样式
            写法:class="xxx"xxx可以是字符串、对象、数组。
                字符串写法适用于:类名不确定,要动态获取。
                对象写法适用于:要绑定多个样式,个数不确定，名字也不确定。
                数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用
        2. style样式
                :style="{fontSize: xxx}"其中xxx是动态值。
                :style="[a,b]"其中a、b是样式对象。
-->

先准备几个style样式

<style>
    .basic {
        width: 300px;
        height: 100px;
        border: 1px solid #000;
    }
    
    .happy {
        border: 4px solid red;
        background-color: orange;
        background: linear-gradient(30deg, orange, pink, yellow, orangered);
    }
    
    .sad {
        border: 2px solid green;
    }
    
    .normal {
        background-color: skyblue;
    }
    
    .demo1 {
        font-size: 30px;
    }
    
    .demo2 {
        background-color: green;
    }
    
    .demo3 {
        border-radius: 20px;
    }
</style>

绑定class样式

<div id="root">
        <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br>

        <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
        <div class="basic" :class="classArr" @click="">{{name}}</div>
        <button @click="add1">移除样式1</button>
        <button @click="add2">移除样式2</button>
        <button @click="add3">移除样式3</button>
        <button @click="del1">添加样式1</button>
        <button @click="del2">添加样式2</button>
        <button @click="del3">添加样式3</button>
        <br><br>

        <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定,但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div><br><br>
        <button @click="usedemo1">使用demo1</button>
        <button @click="usedemo2">使用demo2</button>
    </div>

 Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {
            name: 'feliks',
            mood: 'normal',
            classArr: ['demo1', 'demo2', 'demo3'],
            classObj: {
                demo1: false,
                demo2: false
            } 
        },
        methods: {
            changeMood() {
                const arr = ['sad', 'normal', 'happy'];
                const index = Math.floor(Math.random() * 3);
                this.mood = arr[index];
            },
            //第二个容器
            add1() {
                vm.classArr.shift(0)
            },
            add2() {
                vm.classArr.shift(1)
            },
            add3() {
                vm.classArr.shift(2)
            },
            del1() {
                vm.classArr.push('demo1')
            },
            del2() {
                vm.classArr.push('demo2')
            },
            del3() {
                vm.classArr.push('demo3')
            },
            //第三个容器
            usedemo1() {
                vm.classObj.demo1 = true
            },
            usedemo2() {
                vm.classObj.demo2 = true
            }
        },
    })

绑定style样式

<div id="root">
        <!-- 绑定style--对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div><br><br>

        <!-- 绑定style--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>

Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {
            name: 'feliks',
            styleObj: {
                fontSize: '40px',
                color: 'red',
            },
            styleArr: [{
                backgroundColor: 'skyblue'
            }, {
                color: 'orange'
            }, {
                fontSize: '50px'
            }]
        },
    })

完整demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<!--样式省略-->
<body>
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br>

        <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
        <div class="basic" :class="classArr" @click="">{{name}}</div>
        <button @click="add1">移除样式1</button>
        <button @click="add2">移除样式2</button>
        <button @click="add3">移除样式3</button>
        <button @click="del1">添加样式1</button>
        <button @click="del2">添加样式2</button>
        <button @click="del3">添加样式3</button>
        <br><br>

        <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定,但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div><br><br>
        <button @click="usedemo1">使用demo1</button>
        <button @click="usedemo2">使用demo2</button>

        <!-- 绑定style--对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div><br><br>

        <!-- 绑定style--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>

</body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {
            name: 'feliks',
            mood: 'normal',
            classArr: ['demo1', 'demo2', 'demo3'],
            classObj: {
                demo1: false,
                demo2: false
            },
            styleObj: {
                fontSize: '40px',
                color: 'red',
            },
            styleArr: [{
                backgroundColor: 'skyblue'
            }, {
                color: 'orange'
            }, {
                fontSize: '50px'
            }]
        },
        methods: {
            changeMood() {
                const arr = ['sad', 'normal', 'happy'];
                const index = Math.floor(Math.random() * 3);
                this.mood = arr[index];
            },
            //第二个容器
            add1() {
                vm.classArr.shift(0)
            },
            add2() {
                vm.classArr.shift(1)
            },
            add3() {
                vm.classArr.shift(2)
            },
            del1() {
                vm.classArr.push('demo1')
            },
            del2() {
                vm.classArr.push('demo2')
            },
            del3() {
                vm.classArr.push('demo3')
            },
            //第三个容器
            usedemo1() {
                vm.classObj.demo1 = true
            },
            usedemo2() {
                vm.classObj.demo2 = true
            }
        },
    })
</script>

</html>

Feliks.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-5——样式绑定

文章目录class与style的绑定先准备几个style样式绑定class样式绑定style样式完整democlass与style的绑定<!-- 绑定样式: 1.class样式写法:class="xxx"xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定，名字也不确定。数组写法适用于:要绑定
复制链接

扫一扫