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"

  • 相关阅读:
    How to configure security of ActiveMQ ?
    CentOS 搭建 nginx + tomcat
    25个 Git 进阶技巧
    写给Git初学者的7个建议
    my links
    Shell scripts to Create a local dir base on the time.
    81For全栈技术网
    一款可视化的在线制作H5
    在线制作h5
    在线制作h5——上帝的礼物
  • 原文地址:https://www.cnblogs.com/136asdxxl/p/8600440.html
Copyright © 2011-2022 走看看