VUE学习(三)、绑定样式——class和style

最新推荐文章于 2023-12-28 15:30:33 发布

夏至xz

最新推荐文章于 2023-12-28 15:30:33 发布

阅读量1k

点赞数 1

分类专栏： VUE 文章标签： vue.js css3 css 绑定样式前端

本文链接：https://blog.csdn.net/qq_46452300/article/details/122229754

版权

VUE 专栏收录该内容

26 篇文章 10 订阅

订阅专栏

本文详细介绍了Vue.js中如何动态绑定样式，包括使用class和style属性进行字符串、对象和数组的不同方式绑定。通过示例代码展示了如何根据需求切换不同样式，并提供了完整的HTML和Vue实例，帮助理解Vue中的样式绑定机制。

摘要由CSDN通过智能技术生成

VUE学习(三)、绑定样式——class和style

绑定样式：
	1. class样式
	写法:class="xxx" xxx可以是字符串、对象、数组。
		字符串写法适用于：类名不确定，要动态获取。
		对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
		数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
	2. style样式
		:style="{fontSize: xxx}"其中xxx是动态值。
		:style="[a,b]"其中a、b是样式对象(如下边 vue 中定义的 styleObj、styleObj2)。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>绑定样式</title>
        <style>
            .basic {
                width: 400px;
                height: 100px;
                border: 1px solid black;
            }

            .happy {
                border: 4px solid red;
                background-color: rgba(255, 255, 0, 0.644);
                background: linear-gradient(30deg, yellow, pink, orange, yellow);
            }
            .sad {
                border: 4px dashed rgb(2, 197, 2);
                background-color: gray;
            }
            .normal {
                background-color: skyblue;
            }

            .testStyle1 {
                background-color: yellowgreen;
            }
            .testStyle2 {
                font-size: 30px;
                text-shadow: 2px 2px 10px red;
            }
            .testStyle3 {
                border-radius: 20px;
            }
        </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是样式对象(如下边 vue 中定义的 styleObj、styleObj2)。
		-->
        <!-- 准备好一个容器-->
        <div id="root">
            <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
            <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
            <br /><br />

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

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

            <!-- 
				绑定class样式--数组写法
				这种写法必须用引号，表示一个字符串值
				不然会去 vue 中寻找，却找不到匹配的值
			-->
            <div class="basic" :class="['testStyle1','testStyle2']">{{name}}</div>
            <br /><br />
            <!-- 
				绑定class样式--数组写法
				在  vue 中已设置对应值
			-->
            <div class="basic" :class="[a,b,c]">{{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: "醉瑾",
                mood: "normal",
                a: "testStyle1",
                b: "testStyle2",
                c: "testStyle3",
                classArr: ["testStyle1", "testStyle2", "testStyle3"],
                classObj: {
                    //对象写法
                    testStyle1: false, //不启用
                    testStyle2: true //启用
                },
                styleObj: {
                    fontSize: "40px", //对应 font-size，对于这种类型应该改为驼峰写法
                    color: "red"
                },
                styleObj2: {
                    backgroundColor: "orange"  //驼峰
                },
                //styleArr是一个数组
                styleArr: [
                    {
                        fontSize: "40px",
                        color: "blue"
                    },
                    {
                        backgroundColor: "gray"
                    }
                ]
            },
            methods: {
                changeMood() {
                    const arr = ["happy", "sad", "normal"];
                    const index = Math.floor(Math.random() * 3); //向下取整0 1 2
                    this.mood = arr[index]; //控制mood的值
                }
            }
        });
    </script>
</html>