class动态样式

最新推荐文章于 2024-04-18 15:01:57 发布

TWenYuan

最新推荐文章于 2024-04-18 15:01:57 发布

阅读量550

点赞数 1

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

本文链接：https://blog.csdn.net/TWenYuan/article/details/125274485

版权

javaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

:class=“变量”
:class=“三元运算符”
:class=“{类名1:ture,类名2:false,类名3:false}”
当样式超过2个以上显示时,需要使用{},类名的值为true时,样式显示,为false时隐藏

<!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>
    <!-- 1.引入vue.js -->
    <script src="./vue.js"></script>
    <style>
        .red{
            background: red;
        }
        .lime{
            color: lime;
        }
        .blue{
            background: blue;
        }
        .grey{
            background: grey;
        }
    </style>
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app">
        <!-- 动态样式1:   :class="变量" -->
        <h1 :class="classN">蒹葭苍苍</h1>
        <button @click="changeBlue()">变蓝</button>
        <button @click="changeGrey()">变灰</button>
        <hr>
        <!-- 动态样式2 :class="三元运算符" -->
        <h2 :class="isShow ? 'blue lime' : 'grey lime'">白露为霜</h2>
        <ul>
            <li v-for="(item,index) of arr" :class="index%2==0 ? 'blue lime' : 'grey lime'">{{item}}</li>
        </ul>
        <hr>
        <!-- 动态样式3 :class="{类名1:ture,类名2:false,类名3:false}"-->
        <div :class="{red:false,blue:true,lime:true}">小荷才露尖尖角</div>
        <ul>
            <li v-for="(item,index) in arr" :class="{red:index%3===0,grey:index%3===1,blue:index%3===2}">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        // 3.实例化vue
        new Vue({
            el:'#app',
            // 数据
            data:{
                classN:'red lime',
                isShow:true,
                arr:['科比','詹姆斯','乔丹','姚明','易建联','刘劲']
            },
            // 方法
            methods:{
                changeBlue(){
                    this.classN = 'blue lime';
                },
                changeGrey(){
                    this.classN = 'grey lime';
                }
            }
        })
    </script>
</body>
</html>

<el-button type="primary" style="width: 100%" @click="submit" :loading="isRequesting">
              {{ isRequesting ? '创建中' : '确定' }}
            </el-button>