VUE——通过属性绑定为元素设置class类样式 /style样式

最新推荐文章于 2024-05-31 21:19:43 发布

原创最新推荐文章于 2024-05-31 21:19:43 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

vue

15 篇文章

订阅专栏

本文介绍如何在Vue中利用属性绑定来动态地为元素添加class类样式和应用内联style样式，从而实现元素样式的灵活控制。

通过属性绑定为元素设置class类样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue-2.4.0.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">
        <!--第一种：直接传递一个数组，注意：这里的class需要使用v-bind做数据绑定-->
        <h1 :class="['red','thin']">自由，太多自由，反而想做笼里的困兽。</h1>

        <!--第二种：数组中使用三元表达式-->
        <h1 :class="['thin','italic',flag?'active':'']">自由，太多自由，反而想做笼里的困兽。</h1>

        <!--在数组中使用对象来代替三元表达式，提高代码可读性-->
        <h1 :class="['thin','italic',{'active':flag}]">自由，太多自由，反而想做笼里的困兽。</h1>
    </div>

        <!--在为class使用v-bind绑定对象的时候，对象的属性是类名，
        由于对象的属性可带引号，也可不带，所以没写引号；属性的值是一个标识符-->
		<h1 :class="classObj">自由，太多自由，反而想做笼里的困兽。</h1>

    <script>
        //创建Vue实例，得到ViewModel
        var vm=new Vue({
            el: '#app',
            data: {
                flag: true,
                classObj: {red: true, thin, italic: false, active: false}
            },
            methods: {}
        });
    </script>
</body>

通过属性绑定为元素设置style样式

    <div id="app">
        <!--对象是无序键值对的集合-->
        <!--1.直接在元素上通过:style的形式，书写样式对象-->
        <h1 :style="{color:'red', 'font-size':'40px'}">男孩和女孩都有吉他和舞鞋</h1>

        <!--2.将样式对象，定义到data中，并直接引用到:style中-->
        <!--(1)在data上定义样式-->
        data: {
        h1StyleObj: {color:'red','font-size':'40px','font-weight':'200'}
        }
        <!--(2)在元素中，通过属性绑定的形式，将样式对象应用到元素中-->
        <h1 :style="h1StyleObj">男孩和女孩都有吉他和舞鞋</h1>

        <!--3.:style中通过数组，引用多个data上的样式对象-->
        <!--(1)在data上定义样式-->
        data: {
        h1StyleObj:{color: 'red','font-size':'40px','font-weight':'200'},
        h1StyleObj2:{fontStyle:'italic'}
        }
        <!--(2)在元素中，通过属性绑定的形式，将样式对象应用到元素中-->
        <h1 :style="[h1StyleObj, h1StyleObj2]">男孩和女孩都有吉他和舞鞋</h1>
    </div>

    <script>
        //创建Vue实例，得到ViewModel
        var vm= new Vue({
            el: '#app',
            data: {
                
            },
            methods: {}
        });
    </script>