一、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"

vue2.0 笔记(杂记)的更多相关文章

  1. vue2.0笔记《二》组件

    主要内容:如何注册组件.如何使用组件.父组件子组件之间值的传递 1.如何注册组件 第一步:通过import将子组件载入父组件的js中 // 第一步:通过import将子组件载入父组件的js中 impo ...

  2. vue2.0笔记《一》列表渲染

    内容中包含 base64string 图片造成字符过多,拒绝显示

  3. vue2.0自学笔记

    前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...

  4. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue2.0学习笔记之路由(二)路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue2.0 路由学习笔记

    昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...

  7. Vue2.0源码阅读笔记--生命周期

    一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6 ...

  8. vue2.0读书笔记2-进阶

    一.深入响应式原理 二.过渡效果 三.过渡状态 四.Render函数 五.自定义指令 六.混合 七.插件 八.单文件组件 九.生产环境 十.路由 vue-router: http://router.v ...

  9. Vue2.0 官方文档学习笔记

    VUE2.0官方文档 基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在 ...

随机推荐

  1. Cascader 级联选择器

    当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...

  2. flutter dialog

    flutter Dialog import 'dart:math'; import 'package:flutter/material.dart'; import 'test.dart'; impor ...

  3. Python学习笔记:(十二)输入输出

    一.格式化输出 1.str.format()函数,格式化输出值 2.将输出值转变为字符串,可以使用repr()和str() str()函数将返回一个易读的表达式形式: repr()返回一个解释器易读的 ...

  4. IE浏览器兼容问题(unset不生效)

    背景色重置:background-color: transparent; width重置:auto height重置:auto

  5. Oracle 无备份情况下的恢复--临时文件/在线重做日志/ORA-00205

    13.5 恢复临时文件 临时文件没有也不应该备份.通过V$TEMPFILE可以找到所有的临时文件. 此类文件的损坏会造成需要使用临时表空间的命令执行失败,不至于造成实例崩溃或session中断.由于临 ...

  6. 简单的servlet上传文件

    boolean multipartContent = ServletFileUpload.isMultipartContent(request);if (multipartContent==true) ...

  7. Tomcat 部署两个工程时,另一个访问出现404

    tomcat下部署两个工程时,只有一个可以访问,另一个出现404错误,该如何解决 在开发新项目的时候,有时候为了省时,直接把曾经做过的项目工程A拷贝成改名为B工程,然后再在B工程上进行功能的开发, 此 ...

  8. ca认证(https)

    证书签名过程: 1.网页服务器生成证书请求文件: 2.认证中心确认申请者的身份真实性: 3.认证中心使用根证书的私钥加密证书请求文件,生成证书: 4.把证书传给申请者. 一.实验环境 node1 19 ...

  9. 爬虫七之分析Ajax请求并爬取今日头条

    爬取今日头条图片 这里只讨论出现的一些问题,代码在最下面github链接里. 首先,今日头条取消了"图集"这一选项,因此对于爬虫来说效率降低了很多: 在所有代码都完成后,也许是爬取 ...

  10. xshell登陆后脚本

    vbs的写法: Sub Main xsh.Screen.Send "ssh 用户名@服务器地址" xsh.Screen.Send VbCr xsh.Screen.WaitForSt ...