vue学习（七） class和style学习

最新推荐文章于 2024-09-30 22:04:29 发布

原创最新推荐文章于 2024-09-30 22:04:29 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

vue学习专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨Vue中动态应用样式和类的方法，包括使用对象和数组语法进行class及style绑定，通过实例代码展示了如何根据数据变化动态改变元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .class1{
            color: red;
        }
        .class2{
            font-size:120px;
        }
    </style>
</head>
<body>
    <div id="app">
       <div :class="{class1:isFalse,class2:isFalse}" @click="handleClick">我是class对象的方式</div>

        <div :class="[class3,class4]" @click="handleClick1">我是class数组的方式</div>

        <div class="class1">非动态绑定</div>


        <div :style="style1" @click="handleClick2">我是style对象的方式</div>

        <div :style="[style1,{backgroundColor:'black'}]" @click="handleClick2">我是class数组的方式</div>

        <div style="color: red">非动态绑定</div>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                isFalse:false,
                class3:null,
                class4:null,
                style1:{
                    color:'black',
                    fontSize:'10px'
                }
            },
            methods:{
                handleClick:function () {
                    this.isFalse=!this.isFalse
                },
                handleClick1:function () {
                    this.class3=this.class3==null?"class1":null;
                    this.class4=this.class4==null?"class2":null;
                },
                handleClick2:function () {
                    this.style1.color=this.style1.color=='red'?"black":'red';
                    this.style1.fontSize=this.style1.fontSize=='120px'?"12px":'120px';
                }
            }
        })
    </script>
</body>
</html>