零基础入门Vue之皇帝的新衣——样式绑定
回顾
大致掌握了上一节的 插值语法 我已经可以把想要的数据显示到页面上，并且仅需要修改变量，页面就会跟着实时改变
但如果对于已经熟悉前端的人来说，单单有数据还是不太行，还需要css对数据进行样式的修饰，让页面更加好看
所本篇将记录记录 Class 与 Style 绑定 的学习
总所周知，想要给DOM增加元素有两种方式，一种采用class选中，一种是直接内联样式绑定
绑定HTML Class
Vue对于绑定Class提供了两种语法：
请务必准备好以下css样式，并且能在HTML中索引到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
.style1{
font-size: larger;
text-align: center;
}
.style2{
color: blueviolet;
height: 500px;
}
.style3{
background-color: pink;
line-height: 500px;
}
</style>
</head>
<body>
<div class="">Hello world</div>
</body>
<script>
</script>
</html>
如果按照正常写法，也可以直接这么做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
.style1{
font-size: larger;
text-align: center;
}
.style2{
color: blueviolet;
height: 500px;
line-height: 500px;
}
.style3{
background-color: pink;
}
</style>
</head>
<body>
<div id="root" :class="className">Hello world</div>
</body>
<script>
new Vue({
el:"#root",
data:{
className:"style1"
}
})
</script>
</html>
那么接下来，正文开始.....
对象语法
在对象语法中，可以在data里面，配置一个key为style名称，值为Boolean的对象，当使用v-bind绑定class时。
class可以是上面说的创建的对象，如果那个key的value为true，那么该样式就是启用的，反之不启用
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
.style1{
font-size: larger;
text-align: center;
}
.style2{
color: blueviolet;
height: 500px;
line-height: 500px;
}
.style3{
background-color: pink;
}
</style>
</head>
<body>
<div id="root" :class="classObj">Hello world</div>
</body>
<script>
new Vue({
el:"#root",
data:{
classObj:{ //该对象的key可以为class的样式名称
style1:true, //开启字体水平居中 字体放大
style2:false, //关闭字体颜色 div高度 垂直居中
style3:true, //开启背景颜色
}
}
})
</script>
</html>
数组语法
绑定样式还有另外一种语法，也就是 数组语法
当绑定的class是一个数组时，Vue会默认这个 数组全是样式的名称，这些样式是可以叠加的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
.style1{
font-size: larger;
text-align: center;
}
.style2{
color: blueviolet;
height: 500px;
line-height: 500px;
}
.style3{
background-color: pink;
}
</style>
</head>
<body>
<div id="root" :class="classList">Hello world</div>
</body>
<script>
new Vue({
el:"#root",
data:{
className:"style1",
classList:["style1","style2","style3"] //把需要的样式装入数组
}
})
</script>
</html>
小技巧
对于默认固定的样式，可以直接使用class，对于动态变动的样式，可以另外起一个”v-bind:class“
Vue在解析的时候会把它们叠加在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
.style1{
font-size: larger;
text-align: center;
}
.style2{
color: blueviolet;
height: 500px;
line-height: 500px;
}
.style3{
background-color: pink;
}
</style>
</head>
<body>
<!-- 默认样式style1写死不变 -->
<div id="root" class="style1" :class="classList">Hello world</div>
</body>
<script>
new Vue({
el:"#root",
data:{
className:"style1",
classList:["style2","style3"] //把需要的样式装入数组
}
})
</script>
</html>
绑定内联样式
Vue对于内联样式也有两种绑定方式
对象语法
Vue允许将css对象直接配置成键值对，例如：
.style1{
background-color:red;
}
可以直接配置成js对象的
{
backgroundColor:'red',
}
注：其中要去掉”-“，然后采用驼峰命名方式，当然你也可以使用字符串的对象形式，例如：{'background-color':'red'}
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
</style>
</head>
<body>
<div id="root" :style="styleObj">Hello world</div>
</body>
<script>
new Vue({
el:"#root",
data:{
styleObj:{
fontSize: 'larger',
textAlign: 'center',
color: 'blueviolet',
height: '500px',
lineHeight: '500px',
'background-color': 'pink' //采用字符串，原模原样写也可以
}
}
})
</script>
</html>
数组语法
这个数组的语法和对象语法类型，都是把写好的样式塞进数组，Vue会自动解析，因为用的不多，再次就不再详细解释
去官网详细看看吧~
End
本节完~~~~~~
零基础入门Vue之皇帝的新衣——样式绑定的更多相关文章
- 零基础入门微信小程序开发
注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...
- 零基础入门 实战mpvue2.0多端小程序框架
第1章 课程快速预览(必看!!!)在这一章节中,老师讲带领你快速预览课程整体.其中,涉及到为什么要做这么一门实战课程.制作一个小程序的完整流程是怎么样的,以及如何做项目的技术选型. 第2章 30 分钟 ...
- 零基础入门 Java 后端开发，有哪些值得看的视频?
目前网络上充满了大量的 Java 视频教程,然而内容却鱼龙混杂,为了防止小伙伴们踩坑,一枫结合自己的学习经验,向大家推荐一些不错的学习资源. 作为一名非科班转码选手,可以说,我是在哔哩哔哩上的研究生! ...
- 从零基础入门JavaScript（1）
从零基础入门JavaScript(1) 1.1 Javascript的简史 1995年的时候 由网景公司开发的,当时的名字叫livescript 为了推广自己的livescript,搭了j ...
- 函数:我的地盘听我的 - 零基础入门学习Python019
函数:我的地盘听我的 让编程改变世界 Change the world by program 函数与过程 在小甲鱼另一个实践性超强的编程视频教学<零基础入门学习Delphi>中,我们谈到了 ...
- Cloudera Manager、CDH零基础入门、线路指导 http://www.aboutyun.com/thread-9219-1-1.html (出处: about云开发)
Cloudera Manager.CDH零基础入门.线路指导http://www.aboutyun.com/thread-9219-1-1.html(出处: about云开发) 问题导读:1.什么是c ...
- 【JAVA零基础入门系列】Day2 Java集成开发环境IDEA
开发环境搭建好之后,还需要一个集成开发环境也就是IDE来进行编程.这里推荐的IDE是IDEA,那个老掉牙的Eclipse还是先放一边吧,(手动滑稽). IDEA的下载地址:http://www.jet ...
- 【JAVA零基础入门系列】Day4 变量与常量
这一篇主要讲解Java中的变量,什么是变量,变量的作用以及如何声明,使用变量. 那么什么是变量?对于初学者而言,可以将变量理解为盒子,这些盒子可以用来存放数据,不同类型的数据需要放在对应类型的盒子里. ...
- 【JAVA零基础入门系列】Day5 Java中的运算符
运算符,顾名思义就是用于运算的符号,比如最简单的+-*/,这些运算符可以用来进行数学运算,举个最简单的栗子: 已知长方形的长为3cm,高为4cm,求长方形的面积. 好,我们先新建一个项目,命名为Rec ...
- 【JAVA零基础入门系列】Day6 Java字符串
字符串,是我们最常用的类型,每个用双引号来表示的串都是一个字符串.Java中的字符串是一个预定义的类,跟C++ 一样叫String,而不是Char数组.至于什么叫做类,暂时不做过多介绍,在之后的篇章中 ...
随机推荐
- 13、SpringBoot-配置文件里密码加密
系列导航 springBoot项目打jar包 1.springboot工程新建(单模块) 2.springboot创建多模块工程 3.springboot连接数据库 4.SpringBoot连接数据库 ...
- 解决JedisConnectionException的方法
使用maven连接redis,报JedisConnectionException错误,如下: 解决方案: 找到对应启动的redis.conf文件 1.设置bind配置,已注释 2.设置protecte ...
- java基础(4)--javadoc文档与命令
一.Javadoc文档 javadoc是Sun公司提供的一个技术,它从程序源代码中抽取类.方法.成员等注释形成一个和源代码配套的API帮助文档.也就是说,只要在编写程序时以一套特定的标签作注释,在程序 ...
- docker 安装 nacos
转载请注明出处: https://www.jianshu.com/p/54f6da71ac48
- Spring cloud gateWay 限流器限流（一）
转载请注明出处: spring cloud 提供了限流操作的功能,其使用步骤如下: 1.引入maven依赖: <dependency> <groupId>org.springf ...
- HTTP 1.1响应码
HTTP 1.1响应码 响应码和信息 含义 HttpURLConnection 1XX 信息 100 Continue 服务器准备接受请求主体,客户端应当发送请求主体:这允许客户端在请求中发送大量数据 ...
- Go-错误-error
- [转帖]top指令如何查询指定用户的所有进程？
有两种方法. 1.top指令与字符串查询指令通过通道配合查询. 指令: "-d 5"指的是每五秒刷新一次进程列表,"grep"是字符串查询指令,它可以将含 ...
- [转帖]Kafka故障之磁盘打满
https://www.jianshu.com/p/095e820361ae 问:磁盘打满扩容后能正常重启吗?答:不一定 要看文件格式是否损坏(log.index等).如果损坏会报错:index fi ...
- [转帖]如何利用wrarp测试oss性能？
https://zhuanlan.zhihu.com/p/529735003 前言 我们利用mino与ceph rgw搭建好的oss经过多层网络转发,传输速度必定有所折损,这个时候我们使用wrap ...