Vue-绑定样式

最新推荐文章于 2024-09-15 17:15:28 发布

殊序

最新推荐文章于 2024-09-15 17:15:28 发布

阅读量229

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_63563047/article/details/142098864

版权

绑定样式：

1. class样式

写法:

class="xxx" xxx可以是字符串、对象、数组。

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

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

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

写法：

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

:style="[a,b]"其中a、b是样式对象。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>绑定样式</title>
    <style>
        .basic {
            width: 300px;
            height: 80px;
            border: 10px solid rgb(31, 30, 30);
        }
        .yellow{
            border: 10px solid yellow;
        }
        .green{
            border: 10px solid green;
        }
        .blue{
            border: 10px solid blue;
        }
        .add1{
            border-radius: 10px;
        }
        .add2{
            box-shadow: 10px 10px 10px 10px;
        }
        .add3{
            background-color: aquamarine;
        }
        
    </style>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
    <!-- 
    		绑定样式：
    				1. class样式
    							写法:class="xxx" xxx可以是字符串、对象、数组。
    									字符串写法适用于：类名不确定，要动态获取。
    									对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
    									数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
    				2. style样式
    							:style="{fontSize: xxx}"其中xxx是动态值。
    							:style="[a,b]"其中a、b是样式对象。
    	-->
    <!-- 准备好一个容器-->
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="colors" @click="changeColor">{{name}}</div> <br /><br />

        <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div> <br /><br />

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

        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div> <br /><br />
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el: '#root',
        data: {
            name: 'hello world',
            colors: 'green',
            classArr: ['add1', 'add2', 'add3'],
            classObj: {
                add1: false,
                add2: false,
            },
            styleObj: {
                fontSize: '40px',
                color: 'red',
            },
            styleObj2: {
                backgroundColor: 'orange'
            },
            styleArr: [
                {
                    fontSize: '40px',
                    color: 'pink',
                },
                {
                    backgroundColor: 'gray'
                }
            ]
        },
        methods: {
            changeColor() {
                const arr = ['yellow', 'green', 'blue']
                const index = Math.floor(Math.random() * 3)
                this.mood = arr[index]
            }
        },
    })
</script>

</html>