• vue class与style 绑定详解——小白速会


    一、绑定class的几种方式

    1.对象语法

    直接看例子:

        <div id="app3">
            <div :class="{'success':isSuccess,'fail':isFail}">对象绑定class</div>  //简单的处理直接使用数据来判断
            <div :class="classes">计算属性绑定class</div>  //当class的表达式过长或逻辑复杂时,使用计算属性
        </div>
    var app3 = new Vue({
        el: '#app3',
        data: {
            isSuccess: true,
            isFail: false,
            error: false
        },
        computed: {
            classes: function(){
                return {
                    success: this.isSuccess && !this.error,
                    fail: this.isFail || !this.error
                }
            }
        }
    });

     2.数组语法

    直接看例子:

        <div id="app4">
            <div :class="[successCls,failCls]">绑定多个class属性</div>  //用于来绑定多个class属性
            <div :class="[{'success':isSuccess},failCls]">绑定多个class属性一</div>  //动态的判断添加那些class属性,是最常用的
        </div>
    var app4 = new Vue({
        el: '#app4',
        data: {
            successCls: 'success',
            failCls: 'fail',
            isSuccess: true,
            isFail: false
        }
    });
    <div id= ”app”>
      <button :class= ”classes”></button>
    </div>
    var
    app = new Vue({ el: '#app', data:{ size : 'large', disabled : true }, computed: { classes: function(){ return [ 'btn', { ['btn-'+this.size]: this.size, ["btn-disabled"]: this.disabled } ] } } });

    使用计算属性给元素动态设置类名,在业务中经常用到,尤其是在写复用的组件时,所以在开发过程中,如果表达式较长或逻辑复杂,应该尽可能地优先使用计算属性。

    3.在组件上使用

    直接看例子:

        <div id="app5">
            <my-component :class="{'success': isSuccess}"></my-component>
        </div>
    Vue.component('my-component',{
       template: '<div class="fail">绑定组件class属性</div>'
    });
    var app5 = new Vue({
       el: '#app5',
       data: {
           isSuccess: true
       }
    });

    这种用法仅适用于自定义组件的最外层是一个根元素,否则会无效,当不满足这种条件或需要给具体的子元素设置类名时,应当使用组件的props 来传递。

     二、绑定内联样式

    直接看例子:

        <div id="app6">
            <div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
        </div>
    var app6 = new Vue({
       el: '#app6',
       data: {
           color: 'red',
           fontSize: 14
        }
    });

    大多数情况下, 直接写一长串的样式不便于阅读和维护,所以一般写在data 或computed 里

        <div id="app6">
            <div :style="style">文本</div>
        </div>
    var app6 = new Vue({
       el: '#app6',
       data: {
           style: {
               color: 'red',
               fontSize: 14
           }
        }
    });
  • 相关阅读:
    ZendFramwork配置
    JS控制页面前进、后退
    PHP乱码
    php 文件和表单内容一起上传
    mysqli常用命令
    图解SQL多表关联查询
    mysql默认字符集修改
    mysql控制台命令
    Nanami's Digital Board

  • 原文地址:https://www.cnblogs.com/chaixiaozhi/p/8705675.html
Copyright © 2020-2023  润新知