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权威指南笔记
上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...
随机推荐
- 算法手记（2）Dijkstra双栈算术表达式求值算法
这两天看到的内容是关于栈和队列,在栈的模块发现了Dijkstra双栈算术表达式求值算法,可以用来实现计算器类型的app. 编程语言系统一般都内置了对算术表达式的处理,但是他们是如何在内部实现的呢?为了 ...
- 转载 Python中关键字global与nonlocal的区别
转载自CSDN 雁丘1990, 原文地址: https://blog.csdn.net/xcyansun/article/details/79672634 这篇文章写的很赞, 条理清晰, 分析循序渐进 ...
- Xamarin.Android 关于so包报错问题
问题描述:使用so包时报错. 解决方法: 1.保证 libs > armeabi 和 armeabi-v7a 中的so包一致. 2.去掉 x86,x86_64,arm64-v8a. 3. so的 ...
- shell中mail发邮件的问题
今天为了监控一下脚本,按照网上说的利用mail 发邮件,mail -s "error预警2" peien@1221.qq.com<'邮件内容',发现出现cc,不知道啥问题,也 ...
- 《Kubernetes权威指南》——入门
1 Hello World 1.1 概述 搭建一个Web留言板应用,采用PHP+Redis. Redis由一个master提供写和两个slave提供读. PHP构成的前端Web层由三个实例构成集群,访 ...
- GAN笔记——理论与实现
GAN这一概念是由Ian Goodfellow于2014年提出,并迅速成为了非常火热的研究话题,GAN的变种更是有上千种,深度学习先驱之一的Yann LeCun就曾说,"GAN及其变种是数十 ...
- Java并发编程笔记之CyclicBarrier源码分析
JUC 中 回环屏障 CyclicBarrier 的使用与分析,它也可以实现像 CountDownLatch 一样让一组线程全部到达一个状态后再全部同时执行,但是 CyclicBarrier 可以被复 ...
- 关于springmvc json交互产生的406错误
产生错误的背景:springmvc使用<mvc:annotation-driven>进行配置,那么只要引入响应的json解析包就可以了.在pom中已经引入了如下: <dependen ...
- 120分钟React快速扫盲教程
在教程开端先说些题外话,我喜欢在学习一门新技术或读过一本书后,写一篇教程或总结,既能帮助消化,也能加深印象和发现自己未注意的细节,写的过程其实仍然是一个学习的过程.有个记录的话,在未来需要用到相关知识 ...
- Hibernate学习（四）———— 双向多对多映射关系
一.小疑问的解答 问题一:到这里,有很多学习者会感到困惑,因为他不知道使用hibernate是不是需要自己去创建表,还是hibernate全自动,如果需要自己创建表,那么主外键这种设置也是自己设置吗? ...