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"
vue2.0 笔记(杂记)的更多相关文章
- vue2.0笔记《二》组件
主要内容:如何注册组件.如何使用组件.父组件子组件之间值的传递 1.如何注册组件 第一步:通过import将子组件载入父组件的js中 // 第一步:通过import将子组件载入父组件的js中 impo ...
- vue2.0笔记《一》列表渲染
内容中包含 base64string 图片造成字符过多,拒绝显示
- vue2.0自学笔记
前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...
- vue2.0学习笔记之路由(二)路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0学习笔记之路由(二)路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0 路由学习笔记
昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...
- Vue2.0源码阅读笔记--生命周期
一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6 ...
- vue2.0读书笔记2-进阶
一.深入响应式原理 二.过渡效果 三.过渡状态 四.Render函数 五.自定义指令 六.混合 七.插件 八.单文件组件 九.生产环境 十.路由 vue-router: http://router.v ...
- Vue2.0 官方文档学习笔记
VUE2.0官方文档 基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在 ...
随机推荐
- ceph集群添加osd
获取osd的ID 这个操作是在管理节点上执行 [root@node-4 osd]# ceph osd create 2 对磁盘做处理 [root@node-4 ~]# parted /dev/sdb ...
- 63不同路径II
题目: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ).机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”).现在考 ...
- oracle审计登录失败用户
使用sys账号连接数据库,然后执行如下步骤: 1.alter system set audit_trail=db scope=spfile; 2.重启数据库服务 3.AUDIT SESSION WHE ...
- win server2012r2上发布网站常见错误 "HTTP 错误 500.19 请求的页面的相关配置数据无效" 解决办法
HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效. 问题“详细错误信息模块 IIS Web Core通知 BeginReque ...
- Golang基础(6):go的net/http用法
http包提供了HTTP客户端和服务端的实现 一:http客户端的几种方法 1. func (c *Client) Get(url string) (resp *Response, err error ...
- java锁机制的面试题
java锁机制的面试题 1.ABA问题 2.CAS乐观锁 3.synchronize实现原理 4.synchronize与lock的区别 5.volatile实现原理 6.乐观锁的业务场景及实现方式 ...
- docker 运行mysql最新版本用navicat连接报错:1251
主要是:新版的mysql的加密方式发生了变化,解决方法如下: 1:进入docker容器: docker exec -it mysql(启动mysql时候起的别名) /bin/bash 2:登陆my ...
- 一、Kubernetes_V1.10集群部署-master-生成证书
一.证书生成 1.下载cfssl mkdir -p /etc/kubernetes/sslwget https://pkg.cfssl.org/R1.2/cfssl_linux-amd64 wget ...
- DIY兼容机装苹果系统
遇到问题: 无法用变色龙引导:删除原WIN系统前隐藏分区 变色龙引导画面无法进安装界面:a,wowpc.iso版本低,换新版;b,复制EXTRA进MAC安装盘 MAC OS安装完成后重新启动卡在苹果图 ...
- idea运行时 Process finished with exit code -1073741819 (0xC0000005)
问题描述: idea中启动项目报 Process finished with exit code -1073741819 (0xC0000005) ,如图所示: 问题解决: ...