美文网首页
Vue.js样式绑定

Vue.js样式绑定

作者: 爱学习的代代 | 来源:发表于2020-05-22 08:19 被阅读0次

    概念:class 和 style 是HTML元素的属性,用于设置元素的样式;vue里提供了v-bind指令来动态的绑定元素。

    作用: 页面元素的显示与否一般会读取服务端的数据后, 在进行展示或者设置某种指定的样式。通过v-bind指令,可以动态的控制元素的展示及样式的添加。

    使用方法:

    1. 对指定的元素指定要绑定的class类名,类名之后跟的是逻辑控制变量(即是否将该类添加给当前元素);如果传入的是多个键值对,即表示是否要将多个类名,添加给当前元素。(传入多个类名, 第二个类名要加入‘’单引号)
       <div v-bind:class="{ active: isActive, 'text-danger': hasError}"></div> 
    
    1. vue的对元素的初始化data中,对逻辑控制变量进行赋值。true表示将该类添加到当前元素(赋予该类的css属性),false表示不添加。

    1.对某一个元素绑定样式

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue.js的样式绑定</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .active{
            width: 200px;
            height: 200px;
            background: aqua;
        }
        .text-danger {
            background: red;
        }
    
    </style>
    </head>
    <body>
    
        <div id="app">
            <!-- 注意 class 与 冒号之间不要留空格。 --> 
            <!-- v-bind 支持传入多个类名, 第二个类名要加入‘’单引号 -->
            <!-- <div v-bind:class="{ active: isActive, 'text-danger': hasError}"></div> -->
    
            <!-- 绑定类属性的另一种写法 -->
            <div v-bind:class="classOjbect"></div>
    
        </div>
    
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    // isActive: true,
                    // hasError: false
    
                    classOjbect: {
                        active: true,
                        'text-danger': true
                    }
    
                }
    
            })
        </script>
    </body>
    </html>
    
    

    Note:

    1. v-bind:clsss 冒号与class之间不要留有空格
    2. 绑定类的另一种写法,直接传入一个对象
    <div v-bind:class="greenBlock"></div>
    ...
    
    
    greenBlock: {
        class1: true,
        'class2': false  //将类1的CSS样式添加到当前元素,类2的样式不添加
    
    }
    
    
    1. 将数组传入给绑定类
    <div v-bind:class="[greenBlock, redBlock]"></div>
    ...
    data: {
        greenBlock: 'active',
        redBlock: 'text-danger'
    }
    

    相关文章

      网友评论

          本文标题:Vue.js样式绑定

          本文链接:https://www.haomeiwen.com/subject/akyfahtx.html