vue权威指南笔记01——样式的设置
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>vue自定义样式</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style>
.classA {
font-size: 16px;
color: red;
} .classB {
font-size: 16px;
color: green
} .classC {
font-size: 16px;
color: blue;
}
</style>
</head> <body>
<div id="example">
<!--对象：无效例子
<div v-bind:class=" {A}">
1.对象:不可再设置对象
</div>
<div v-bind:class=" {classA : true}">
2.对象：设置样式名称后，也不可直接设置true
</div>
<div v-bind:class=" {classA}">
3.对象: 设置样式名称后，不设置也不会显示
</div>
-->
<div v-bind:class=" {classA : isShow}">
1.对象：样式名称(classA)+是否显示的对象(缺一不可)
</div>
<!--数组无效
<div :class="[classB]">
1.数组:不可直接设置样式名称
</div>
<div :class="[{C:true}]">
2.数组：设置样式的对象后，也不可以直接设置true
</div>
-->
<div :class="[B]">
2.1.数组：直接对象赋值样式的名字(classB)
</div>
<div :class="[{classC: isShow}]">
2.2.数组：包含一个对象(对象的用法)
</div>
<!--三元运算：内联样式的设置:可以直接设置true-->
<div :style="{'color':isShow? '#000':'#fff'}">
3.style内联：JSX写法
</div>
<div :class="true?A:null">
4.class内联：单纯对象判断
</div>
</div>
</body> <script>
var examleVM2 = new Vue({
el: '#example',
data: {
A: 'classA',
B: 'classB',
C: 'classC',
isShow: true,
isHidden: false,
}
})
</script> </html>
vue权威指南笔记01——样式的设置的更多相关文章
- vue权威指南笔记02——对比v-if与v-show
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Struts2权威指南笔记
Struts2权威指南笔记 1.mvc特点包括: ① 多个视图可以对应一个模型 ② 模型返回的数据与显示逻辑分离 ③ 应用层被分隔为三层,降低了各层之间的耦合,提供了应用的可扩展性 ④ 控制层的概念也 ...
- 【vue 权威指南】 学习笔记 二
1.指令 1.1内部指令 基础指令:v-show , v-else , v-model , v-repeat , v-for , v-text , v-el , v-html , v-on , v-b ...
- 【vue 权威指南】 学习笔记 一
内容简介 vue.js 是一个用来开发Web界面的前端库. 1.vue.js 是什么 vue.js 是一个构建数据驱动的web界面的库,vue.js 通过简单的API提供高效的数据绑定和灵活的组件系统 ...
- css 权威指南笔记（ 五）结构和层叠之三种样式来源
CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样 ...
- javascript权威指南笔记
最近每天工作之余看下js的细节部分,时间不是很多,所以看的进度也不会太快,写个博客监督自己每天都看下. 以前不知道的细节或者以前知道但是没注意过的地方都会记录下来,所以适合有一定基础的,不适合零基础新 ...
- css权威指南--笔记
第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate styleshee ...
- css 权威指南笔记（四）选择器
规则结构 每个规则都有两个基本部分组成:选择器和声明块.声明块由一个或多个声明组成,每个声明则是一个属性-值对. 元素选择器 声明和关键字 关键字一般由空格隔开:有一种情况例外 font属性中的 斜 ...
- 1.语言概述-JavaScript权威指南笔记
上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...
随机推荐
- Linux - history命令的常用方法
history命令 打印所有命令记录:history 打印最近10条记录:history 10 执行第123条命令记录:!123 重复执行上一条命令:!! 执行最后一次以ls开头的命令:!ls 逐屏列 ...
- HoloLens开发手记 - 手势输入 Gesture input
手势是HoloLens三个首要输入形式之一.一旦你使用凝视定位了一个全息图像,手势允许你与它交互.手势输入允许你使用手或者点击器原生地与全息图像交互. 手势之外,你也可以在应用中使用语音输入来交互. ...
- Django--视图函数views
1 视图函数 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. ...
- list源码1(参考STL源码--侯捷):list节点、迭代器、数据结构
list源码1(参考STL源码--侯捷):list节点.迭代器.数据结构 list源码2(参考STL源码--侯捷):constructor.push_back.insert list源码3(参考STL ...
- NAT转换、VLAN与Trunk（特典：ACL初步）
一.NAT(网络地址转换) 即公有地址转换为私有地址 私有地址段(非公网地址,即公网不识别) A 10.0.0.0 10.255.255.255 B 17 ...
- apache tomcat搭建负载均衡（实现集群中的session同步）
原理:tomcat 做个WEB服务器有它的局限性,处理能力低,效率低.承受并发小(1000左右).但目前有不少网站或者页面是JSP的.并采用了tomcat做为WEB,因此只能在此基础上调优. 目前采取 ...
- [SPOJ22343] Norma
Description 现在有一个长度为\(N(N\leq 500000)\)的序列,定义区间\([l,r]\)的价值为\([l,r]\)的最小值乘上\([l,r]\)的最大值乘上\([l,r]\)的 ...
- 关于EF实体类的一点思考
在EF中修改一条记录时,一般是先查出该条记录,然后再通过TryUpdateModel或其他方式更新对应的属性.但我很讨厌这种要更新一条记录时,还要先去把记录查询出来的做法.我喜欢像sql语句那样的直接 ...
- HTML中多种空格转义字符
记录一下,空格的转义字符分为如下几种: 1. &160#;不断行的空白(1个字符宽度) 2. &8194#;半个空白(1个字符宽度) 3. &8195#;一个空白(2个 ...
- [转]Angular 4 *ngIf/Else
本文转自:http://tylerscode.com/2017/03/angular-4-ngifelse/ As you may know it wasn’t that many months ag ...