zoukankan      html  css  js  c++  java
  • vue里如何灵活的绑定class以及内联style

    在我们平常的前端开发中少不了对DOM的操作,以及样式的动态控制,那我们在使用vue的时候该如何灵活的绑定class呢

    1.最简单一个class绑定

    v-bind:class设置一个对象,可以动态地切换class
    例如:
    <div id="app">
        <div :class ="{ 'active':isActive }"></ div>
    </div>
    <script>
    new Vue({
        el :'#app',
        data: {
            isActive: true
        }
    })
    </script>
    最终渲染结果为=====><div class="active"></div>

    2对象中也可以传入多个属性,来动态切换class,同时class也可以与:class共存,看下面代码↓

    <div id="app">
        <div class="title" :class ="{ 'active':isActive, 'addcolor':isAdd }"></ div>
    </div>
    <script>
    new Vue({
        el :'#app',
        data: {
            isActive: true,
            isAdd: true
        }
    })
    </script>
    最终渲染结果为=====><div class="title active addcolor"></div>

    3.当class需要绑定比较多,而且逻辑比较复杂时,我们可以给:class的值绑定一个计算属性,看代码↓

    <div id="app">
        <div :class ="finalclass"></ div>
    </div>
    <script>
    new Vue({
        el :'#app',
        data: {
            isActive: true,
            isAdd: true,
            error: true
        },
        computed: {
            return {
                'active': this.isActive && this.isAdd,
                'error': this.eroor
            }
        }
    })
    </script>
    最终渲染结果为=====><div class="active error"></div>

    4.我们也可以给:class绑定数组格式,以及在数组里再加逻辑,看代码↓

    <div id="app">
        <div :class ="[ {'active': isActive }, errorShow ]"></div>
    </div>
    <script>
    new Vue({
        el :'#app',
        data : {
            isActive : true ,
            errorShow : 'error'
        }
    })
    </script>
    最终渲染结果为=====><div class="active error"></div>

    5.再来看一种组合式使用方法,看下面代码↓

    <div id="app">
        <button :class ="finalclass"></button>
    </div>
    <script>
    new Vue({
        el :'#app',
        data: {
            size: 'large',
            disabled: true
        },
        computed: {
            finalclass: function (){
                return [
                    'btn',
                    {
                        [ 'btn-' + this.size ]: this.size !== '',
                        [ 'btn-disabled']: this.disabled
                    }
                ]
            }
        }
    })
    </script>
    最终渲染结果为=====><button class ="btn btn-large btn-disabled"></button>

    6.绑定内联样式

    <div id="app">
        <div :style ="finalstyle"></div>
    </div>
    <script>
    new Vue({
        el :'#app',
        data: {
            finalstyle: {
                color: 'blue',
                fontSize: 16+'px'
                //这里css属性的名称用驼峰命名或短横线分割命名
            }
        }
    })
    </script>
    最终渲染结果为=====><div style="color: blue; font-size: 16px;"></div>

    应用多个样式对象时,也可以使用数组语法:

    <div :style="style1, style2">123</div>

    ----------------------------------------------------

  • 相关阅读:
    Windows Internals学习笔记(八)IO系统
    FPGA相关术语(一)
    Bilinear Filter
    总线与接口
    GPIO相关知识
    .NET IL学习笔记(一)
    Windows Internals学习笔记(七)Image Loader
    Windows Internals学习笔记(五)Synchronization
    struts2官方 中文教程 系列五:处理表单
    struts2官方 中文教程 系列四:Action
  • 原文地址:https://www.cnblogs.com/bobo1/p/10784361.html
Copyright © 2011-2022 走看看