欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue学习七--通过属性绑定为元素设置class样式

程序员文章站 2022-03-03 09:16:35
...

以下采用四种方当绑定class样式:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
        .red{
            color:red;
        }

        .thin{
            font-weight: 200;
        }

        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5em; 
            /* 字母之间的间距 */
        }

    </style>
</head>

<body>
    <div id="app">
        <!-- <h1 class="red thin">这个一个很大很大的h1,超级大的那种</h1> -->
        <!-- 第一种方法,直接传递一个数组, 注意:  这个数组必须要和v-bind 进行数据绑定 -->

        <!-- <h1 :class="['red', 'thin']">这个一个很大很大的h1,超级大的那种</h1> -->
        <!-- 在数据中使用三列表达式 -->

        <!-- 在数组中使用对象来代替三元表达式,提高代码可读性 -->
        <!-- <h1 :class="['red', 'thin',{'active': flag} ]">这个一个很大很大的h1,超级大的那种</h1> -->

        <!-- 在为 v-bind 绑定 对象的时候 ,对象的属性是类名 ,由于对象的属性可带可不带引号,这里省略引号  属性的值是一个标识符 -->
        <!-- <h1 :class="{thin:false,red: true,italic:true, active:true }">这个一个很大很大的h1,超级大的那种</h1> -->

        <!--class放在data对象中 -->
        <h1 :class="classobj">这个一个很大很大的h1,超级大的那种</h1>

    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               flag:true,
               classobj:{thin:false,red: true,italic:true, active:true },

           },
           methods:{}
        });
    </script>
</body>

</html>
相关标签: vue