zoukankan      html  css  js  c++  java
  • class与style绑定

    数据绑定一个常见需求是操作元素的class列表和内联样式。因为它们都是属性,我们可以用v-bind处理他们:

    只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易出错。因此,在v-bind用于class和style时,Vue.js

    专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或者数组。

    绑定HTML Class

    对象语法

    我们可以传给v-bind:class一个对象,以动态的切换class

    <div v-bind:class="active:isActive"></div>

    只有在isActive为true时。才会添加class active

    我们也可以在对象中传入更多属性用来动态切换多个class,因此v-bind:class指令可以与普通的class属性共存

    <div class="static" v-bind:class="active:isActive"></div>
    
    <div class="static" v-bind:class="{active:isActive,"text-danger":isError}"></div>

    如下的data:

    data:{
    
      isActive:true,
    
      isError:false
    
    }

    渲染为:

    <div class="static active"></div>
    
    <div class="static active"></div>

    也可以直接绑定数据里的一个对象:

    data:{
    
      classObject:{
    
        isActive:true,
        isError:false
      }
    
    }
    <div v-bind:class="classObject"></div>

    渲染的结果跟上面的一样。我们也可以在这里绑定返回对象计算属性。这是一个常用并且强大的模式:

    data:{
    
      isActive:true,
    
      isError:false,
      computed:{
    
        classObject:function(){
    
          return {"active":this.isActive&&!this.isError,"isError":this.isError&&!this.isActvive}
          }
      }
    
    }
    <div v-bind:class="classObject"></div>

    数组语法:

    我们可以把一个数组传给v-bind:class,以应用一个class列表:

    <div v-bind:class="classObject"></div>
    data:{
    
      classObject:["active","text-danger"]
    
    }

    渲染结果

    <div class="active text-danger"></div>

    根据条件切换列表中的class

     <div v-bind:class="[isActive?'active':' ','text-danger']">三元表达式切换列表中的数据</div>

    不过,当有多个条件class时这样写有些繁琐。可以在数组语法中使用对象语法:

    <div v-bind:class="[active:isActive,text-danger]"></div>

    用在组件上:

    当你在一个定制的组件上用到class属性的时候,这些类将被添加到根元素上面,这个元素上已经存在的类不会被覆盖。

    demo:

    Vue.component("todo-item",{
    
    template:'<div class="classA classB"></div>'
    
    });
    <todo-item class="classC classD"></todo-item>

    渲染后的结果:

    <div class="classA classB classC classD"></div>

    同样适用于绑定HTML class

    <todo-item v-bind:class="{active:isActive}"></todo-item>

    绑定内联样式:

    对象语法:

    v-bind:style 的对象语法十分直观,看着非常像css,其实它是一个javaScript对象。css属性名可以用驼峰式或短横分割命名:

     <div v-bind:style="{color:redColor,fontSize:fontSize+'px'}">绑定内联样式</div>
    data:{
    
      redColor:'red',
    
      fontSize:40
    
    }

    渲染后的结果:

    <div style="color:red; font-size:40px;">绑定内联样式</div>

    直接绑定一个样式对象通常更好,让模板更清晰

    <div v-bind:style="styleObj">直接绑定样式对象</div>
    data:{
    
      styleObj:{
    
          color:'red',
          font-size:'40px'
    
        }
    
      }

    同样的,对象语法常常结合返回对象的计算属性使用。

    数组语法

    v-bind:style 的数组语法可以将多个样式对象应用到一个元素上:

    <div v-bind:style="styleObj1 styleObj2">将多个对象样式绑定到这个元素上</div>

    自动添加前缀

    当v-bind:style 使用需要特定前缀的css属性时,如transform,Vue.js会自动侦测并添加相应的前缀。

  • 相关阅读:
    UOJ.26.[IOI2014]Game(交互 思路)
    Good Bye 2016 F.New Year and Finding Roots(交互)
    Codeforces.835E.The penguin's game(交互 按位统计 二分)
    Codeforces.744B.Hongcow's Game(交互 按位统计)
    Codeforces.862D.Mahmoud and Ehab and the binary string(交互 二分)
    正睿OI 提高 Day1T3 ZYB玩字符串(DP)
    划分vlan
    2三层交换机实现vlan间的路由
    交换机基础-交换机远程telnet
    自动化运维环境的搭建问题处理
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6544443.html
Copyright © 2011-2022 走看看