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权威指南笔记
上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...
随机推荐
- java main()线程是不是最后一个退出的（相比较main中创建的其他多个线程）
JVM会在所有的非守护线程(用户线程)执行完毕后退出: main线程是用户线程: 仅有main线程一个用户线程执行完毕,不能决定JVM是否退出,也即是说main线程并不一定是最后一个退出的线程. pu ...
- selenium的chromedriver对应的chrome版本
chromedriver下载地址:http://chromedriver.storage.googleapis.com/index.html chromedriver版本 支持的Chrome版本 v2 ...
- (转)Linux 系统设置 : dmesg 命令详解
原文:https://blog.csdn.net/yexiangCSDN/article/details/80683246 https://www.cnblogs.com/duanxz/p/34770 ...
- centos7 部署YApi
=============================================== 2018/6/5_第2次修改 ccb_warlock 更新说 ...
- python3中的range函数返回的是列表吗?
注意,这里说的Python3里面的range函数,和Python2是不同的,返回的不是列表,是可迭代对象. 在python3中,如果执行下面的语句 print(range(10)) 得到结果是 ran ...
- Dockerfile指令详解
Dockerfile中包括FROM.MAINTAINER.RUN.CMD.EXPOSE.ENV.ADD.COPY.ENTRYPOINT.VOLUME.USER.WORKDIR.ONBUILD等13个指 ...
- 【ASP.NET MVC系列】浅谈ASP.NET 程序发布过程
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- csv文件格式说明
csv文件应用很广泛,历史也很悠久.有很多种类型的csv格式,常用的是rfc 4180定义的格式. csv文件包含一行或多行记录,每行记录中包含一个或多个字段.记录与记录之间使用换行符分隔,最后一个记 ...
- .Net实现微信公众平台开发接口（一） 之 “微信开发配置”
我们只要通过微信官方认证,成为开发者,才能实现微信提供的各种接口,否则即使调用了接口,微信也不会实现推送,功能也无法通过开发模式真正得到实现,所以需要正确配置微信信息,通过微信官方认证,成为开发者才可 ...
- Windows下vue-cli脚手架搭建入门<一>
简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行,输入命令 node-v .np ...