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权威指南笔记
上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...
随机推荐
- 记Booking.com iOS开发岗位线上笔试
今晚参加了Booking的iOS职位线上笔试,结束后方能简单归纳一下. 关于测试内容: Booking采用了HackerRank作为测试平台,测试总时长为75分钟,总计4道题. 测试之前我很紧张,因为 ...
- 急速JavaScript全栈教程
3 天前 · 3k 次阅读 急速JavaScript全栈教程 javascript node.js mongodb 140 自从一年前发布了Vuejs小书的电子书,也有些日子没有碰过它们了,现在 ...
- python之线程（threading）
线程是属于进程的,一个进程可能包含多个线程 至于线程和进程在使用时哪个更好,只能看使用的场景了 话不多说,看下线程模块(threading)的使用方法: #导入模块 import threading, ...
- Java读取Properties的几种方法
本文转载自:http://blog.csdn.net/chjttony/article/details/5927613 每次用完每次忘相对与绝对...
- 通过spring抽象路由数据源+MyBatis拦截器实现数据库自动读写分离
前言 之前使用的读写分离的方案是在mybatis中配置两个数据源,然后生成两个不同的SqlSessionTemplate然后手动去识别执行sql语句是操作主库还是从库.如下图所示: 好处是,你可以人为 ...
- 独享锁 & 共享锁
独享锁(互斥锁):同时只能有一个线程获得锁.比如,ReentrantLock 是互斥锁,ReadWriteLock 中的写锁是互斥锁. 共享锁:可以有多个线程同时获得锁.比如,Semaphore.Co ...
- 【Spark笔记】Windows10 本地搭建单机版Spark开发环境
0x00 环境及软件 1.系统环境 OS:Windows10_x64 专业版 2.所需软件或工具 JDK1.8.0_131 spark-2.3.0-bin-hadoop2.7.tgz hadoop-2 ...
- jquery easyui datagrid mvc server端分页排序筛选的实现
1自定义一个ModelBinder public class filterRule { public string field { get; set; } public string op { get ...
- 使用Asp.Net Core MVC 开发项目实践[第二篇:EF Core]
在项目中使用EF Core还是比较容易的,在这里我们使用的版本是EF Core 2.2. 1.使用nuget获取EF Core包 这个示例项目使用的是SQLSERVER,所以还需要下载Microsof ...
- C# Azure 远程调试
Azure上的配置 1. 登录我们自己的app,开启远程调试 [远程调试]—> 打开 [远程 Visual Studio 版本] –> 2017,看你是什么版本 这里有点需要注意的是,如果 ...