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层相应的逻辑数据,在 ...
随机推荐
- Java String.Format() 方法及参数说明
转自:https://blueram.iteye.com/blog/441683 JDK1.5中,String类新增了一个很有用的静态方法String.format():format(Locale l ...
- 第六章 SpringCloud之Ribbon负载均衡
###################使用默认的负载均衡(轮询)############################# 1.pom.xml <?xml version="1.0&q ...
- Windows下配置DVWA
VWA是用PHP+MySQL编写的一套用于常规Web漏洞教学和检测的Web脆弱性测试程序,包含了SQL注入.XSS.盲注等常见的一些安全漏洞,是一个非常好的网络安全实验平台. 环境配置比较简单, 步骤 ...
- Python基本语法_函数_参数的多类型传值
前言 上一篇主要介绍了Python函数的参数类型,本篇继续学习Python函数多类型传值. 目录 前言 目录 软件环境 参数的多类型传值 向函数传递Tuple 向函数传递List 向函数传递Dicti ...
- 将dos窗口调白教程
将dos弹出窗口调白教程 第1步:同时按住Win+R键,输入cmd 第2步:右键点击标题栏 第3步:点击默认值,然后再点击颜色 第四步:将窗口颜色设置为白色,字体颜色设置为黑色(效果测试)
- canvas基础知识
canvas基础知识 ## CanvasDOM对象 #### 获取绘图环境```canvas.getContext();``` #### 设置宽和高```canvas.width = 500;canv ...
- TCP端口扫描
# TCP三次握手 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认: 第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1 ...
- mongodb 数据库操作 -- 》常用命令
首先需要下载数据库,安装后,找到bin目录,点开bin目录,复制当前路径配置到环境变量中 和bin的同级下,需要建立一个data/db文件夹,该文件夹并不会自动生成,必须手动设置 启动数据库 看 ...
- 六、Kubernetes_V1.10集群部署-node-部署节点组件
一.配置kubelet 1.配置启动文件 # cat > /usr/lib/systemd/system/kubelet.service <<EOF [Unit] Descripti ...
- http请求跨域问题分析
http请求跨域问题分析 个人认为可能涉及很多http的知识,本人才疏学浅不敢妄自揣测,只是做个笔记为了以后对比理解,从原生fetch说起吧,前提假设有个后端服务,我用express来模拟,如下: v ...