一、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. Java String.Format() 方法及参数说明

    转自:https://blueram.iteye.com/blog/441683 JDK1.5中,String类新增了一个很有用的静态方法String.format():format(Locale l ...

  2. 第六章 SpringCloud之Ribbon负载均衡

    ###################使用默认的负载均衡(轮询)############################# 1.pom.xml <?xml version="1.0&q ...

  3. Windows下配置DVWA

    VWA是用PHP+MySQL编写的一套用于常规Web漏洞教学和检测的Web脆弱性测试程序,包含了SQL注入.XSS.盲注等常见的一些安全漏洞,是一个非常好的网络安全实验平台. 环境配置比较简单, 步骤 ...

  4. Python基本语法_函数_参数的多类型传值

    前言 上一篇主要介绍了Python函数的参数类型,本篇继续学习Python函数多类型传值. 目录 前言 目录 软件环境 参数的多类型传值 向函数传递Tuple 向函数传递List 向函数传递Dicti ...

  5. 将dos窗口调白教程

    将dos弹出窗口调白教程 第1步:同时按住Win+R键,输入cmd 第2步:右键点击标题栏 第3步:点击默认值,然后再点击颜色 第四步:将窗口颜色设置为白色,字体颜色设置为黑色(效果测试)

  6. canvas基础知识

    canvas基础知识 ## CanvasDOM对象 #### 获取绘图环境```canvas.getContext();``` #### 设置宽和高```canvas.width = 500;canv ...

  7. TCP端口扫描

    # TCP三次握手 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认: 第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1 ...

  8. mongodb 数据库操作 -- 》常用命令

    首先需要下载数据库,安装后,找到bin目录,点开bin目录,复制当前路径配置到环境变量中 和bin的同级下,需要建立一个data/db文件夹,该文件夹并不会自动生成,必须手动设置   启动数据库  看 ...

  9. 六、Kubernetes_V1.10集群部署-node-部署节点组件

    一.配置kubelet 1.配置启动文件 # cat > /usr/lib/systemd/system/kubelet.service <<EOF [Unit] Descripti ...

  10. http请求跨域问题分析

    http请求跨域问题分析 个人认为可能涉及很多http的知识,本人才疏学浅不敢妄自揣测,只是做个笔记为了以后对比理解,从原生fetch说起吧,前提假设有个后端服务,我用express来模拟,如下: v ...