zoukankan      html  css  js  c++  java
  • vue2.0 笔记(杂记)

    一、vue class、style表达式的类型: 字符串、对象和数组
    1、字符串

    <div class="static" v-bind:class="class-a">
    // 结果:
    <div class="static class-a"></div>

    2、对象 :class="{ 'key': value变量, 'key': value变量 }" 或者 :class="对象key"

    <div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
    
    data: {
      isA: true,
      isB: false
    }
    // 结果:
    <div class="static class-a"></div>

    等同于:(更简洁)

    <div class="static" v-bind:class="classObject"></div>
    
    data: {
        classObject: {
            'class-a': true,
            'class-b': false
        }
    }

    3、数组 :class="[value变量, value变量]"

    <div v-bind:class="[classA, classB]">
    
    data: {
        classA: 'class-a',
        classB: 'class-b'
    }
    // 结果:
    <div class="static class-a class-b"></div>

    4、综合应用
    三元表达式:

    <div v-bind:class="[isActive ? classA : '', classB]"></div>
    
    data: {
        isActive: true,
        classA: 'class-a',
        classB: 'class-b'
    }
    
    // 结果同上

    简化后

    <div v-bind:class="[{class-a: isActive}, classB]"></div>
    
    data: {
        isActive: true,
        classB: 'class-b'
    }
    // 结果同上


    二、style样式绑定与class原理相同

    注意点:
    1、CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,需用单引号括起来) 来命名
    2、2.3.0+ 添加前缀,只匹配兼容的之一
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>


    三、v-for

    数组中: v-for="(item[, index]) in arrays" 或者 v-for="item of arrays"
    对象中: v-for="(value[, key, index) in object"

  • 相关阅读:
    NOIP 2017 游记?
    bzoj4596 [Shoi2016]黑暗前的幻想乡
    bzoj2467 [中山市选2010]生成树
    bzoj3534 [Sdoi2014]重建
    bzoj1016 [JSOI2008]最小生成树计数
    bzoj4044 [Cerc2014] Virus synthesis
    bzoj4530 [Bjoi2014]大融合
    bzoj2594 [Wc2006]水管局长数据加强版
    bzoj 2342 [Shoi2011]双倍回文
    bzoj [HNOI2008]Cards
  • 原文地址:https://www.cnblogs.com/136asdxxl/p/8600440.html
Copyright © 2011-2022 走看看