Vue与class和style

最新推荐文章于 2024-04-12 05:31:53 发布

我会努力变强的

最新推荐文章于 2024-04-12 05:31:53 发布

阅读量421

点赞数

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

本文链接：https://blog.csdn.net/qq_40837310/article/details/122814585

版权

JavaScript 专栏收录该内容

38 篇文章 8 订阅

订阅专栏

简介

这篇文章主要介绍如何在vue中绑定class和样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与css</title>
    <style>
    
        .basic{
            height: 200px;
            margin-bottom: 10px;
            margin-top: 10px;
            background-color: grey;
        }
        .happyMood{
            background-color: pink;
        }
        .sadMood{
            background-color: black;
        }
        .nomalMood{
            background-color: green;
        }
        .c1{
            background-color: black; 
        }
        .c2{
            height: 400px;
        }
        .c3{
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- 创建三个div，默认有basic类，然后展示三种不同绑定样式的方法 -->
        <!-- 第一种使用属性名的方式指定，这样的情况适用于该元素的绑定的动态类只有一个，但是类名不确定的情况。 -->
        <div class="basic" :class="mood"></div>
        <button @click="changeMood">随机切换心情</button>
        <!-- 第二种方式是使用数组的方式，适用于绑定的类的个数不确定，名字也不确定 -->
        <div class="basic" :class="cArr"></div>
        <button @click="m1">使用背景色为黑色和椭圆形</button>
        <button  @click="m2">使用背景色为黑色和加大高度</button>
        <button  @click="m3">使用背景色为黑色和圆形和加大高度</button>
        <!-- 第三种方式是使用对象的方式，适用于数量确定，名字确定，但是是否使用不确定 -->
        <div class="basic" :class="cObj"></div>
        <button @click="m4">使用背景色为黑色</button>
        <button @click="m5">取消背景色为黑色</button>
        <button  @click="m6">使用椭圆形</button>
        <button  @click="m7">取消椭圆形</button>
        <button  @click="m8">使用加大高度</button>
        <button  @click="m9">取消加大高度</button>

        <!-- 这个说明vue使用style内联样式 -->
        <div class="basic" :style="styleObj"></div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:"#root",
            data:{
                mood:"",
                moodNameArray:["happyMood","sadMood","nomalMood"],
                cArr:[],
                c1:"c1",
                c2:"c2",
                c3:"c3",
                cObj:{
                    //属性名是类名，值是true（使用）false（不使用）
                    c1:false,
                    c2:false,
                    c3:false
                },
                styleObj:{
                    //属性名是样式名，属性值是样式值
                    //椭圆加边框
                    "border-radius": "50%",
                    "border":" black solid 5px"
                }
            },
            methods: {
                changeMood(){
                    //获取0-2的随机整数
                    let index = Math.round(Math.random()*2+0);
                    this.mood = this.moodNameArray[index];
                
                },
                m1(){
                    this.cArr = ["c1","c3"];
                },
                m2(){
                    this.cArr = ["c1","c2"];
                },
                m3(){
                    this.cArr = ["c1","c2","c3"];
                },
                m4(){
                    this.cObj.c1 = true;
                },
                m5(){
                    this.cObj.c1 = false;
                },
                m6(){
                    this.cObj.c3 = true;
                },
                m7(){
                    this.cObj.c3 = false;
                },
                m8(){
                    this.cObj.c2 = true;
                },
                m9(){
                    this.cObj.c2 = false;
                },
            },
        })
    </script>
</body>
</html>

效果可以复制代码自行验证

我会努力变强的

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue与class和style

简介这篇文章主要介绍如何在vue中绑定class和样式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue与css</title> <style> .basic{ height: 200px; margin-bottom: 10p
复制链接

扫一扫