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权威指南笔记
上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...
随机推荐
- javascript 实现数据结构 - 队列
队列是遵循FIFO(First In First Out,先进先出,也称为先来先服务)原则的一组有序的项.队列在尾部添加新元素,并从顶部移除元素.最新添加的元素必须排在队列的末尾. 1.构造函数构建队 ...
- apache和tomcat的区别和联系
两者既有联系又有区别,是两个软件,可独立使用,也可整合使用.Apache是web服务器(静态解析,如HTML),本身只支持html,Web服务器专门处理HTTP请求(request),可以通过插件支持 ...
- [视频]K8飞刀 正则采集WordPress站点用户
链接:https://pan.baidu.com/s/16NCuC-mD4-3dxfVdcIFkxg 提取码:k3bw
- Spring Boot 2.0正式发布，新特性解读
作者|翟永超 Spring Boot 2.0 来啦,有哪些新特性?升级吗? 写在前面 北京时间 3 月 1 日,经过漫长的等待之后,Spring Boot 2.0 正式发布.作为 Spring 生态中 ...
- Xamarin.Android 关于so包报错问题
问题描述:使用so包时报错. 解决方法: 1.保证 libs > armeabi 和 armeabi-v7a 中的so包一致. 2.去掉 x86,x86_64,arm64-v8a. 3. so的 ...
- eclipse在linux安装报错
JVM terminated. Exit code=127/usr/bin/java-Dosgi.requiredJavaVersion=1.8-Dosgi.instance.area.default ...
- Python内置类型(6)——生成器
上节内容说到Python的for语句循环本质上就是通过调用Iterable可迭代对象的__iter()__方法获得一个Iterator迭代器对象,然后不断调用Iterator迭代器对象__next() ...
- 程序员、互联网从业者必读KK三大力作之《必然》总结
- 【Java基本功】一文读懂final关键字的用法
本文主要介绍了final关键字的基本使用方法及原理 final关键字可以修饰类.方法和引用. 修饰类,该类不能被继承.并且这个类的对象在堆中分配内存后地址不可变. 修饰方法,方法不能被子类重写. 修饰 ...
- Docker数据卷容器备份、恢复
1.备份数据卷容器 使用数据卷来备份数据,通过指定本地的一个文件路径,对应到容器中的路径,运行tar命令将重要的文件打包备份. $ cd /home/xm6f/dev $ docker run --v ...