零基础入门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数组.至于什么叫做类,暂时不做过多介绍,在之后的篇章中 ...
随机推荐
- vscode prettier保存代码时自动格式化
https://blog.csdn.net/qq_37815596/article/details/109225879
- C# 序列化器
理论知识: 序列化是指将对象转换成字节流,从而存储对象或将对象传输到内存.数据库或文件的过程. 它的主要用途是保存对象的状态,以便能够在需要时重新创建对象. 反向过程称为"反序列化" ...
- shell读取配置文件中的参数
shell读取配置文件中的参数 配置文件 配置文件config.properties如下: user=bk age=25 ip=192.168.37.1 一.使用cat+awk语句过滤并赋值变量 u ...
- HTTP协议六种请求：GET,HEAD,PUT,DELETE,POST
Http定义了与服务器交互的不同方法,标准Http协议支持六种请求方法,即: 1.GET 2.POST 3.PUT 4.Delete 5.HEAD 6.Options 最基本的方法有4种,分别是GET ...
- 线性代数 · 矩阵 · Matlab | Moore-Penrose 伪逆矩阵代码实现
背景 - Moore-Penrose 伪逆矩阵: 对任意矩阵 \(A\in\mathbb C^{m\times n}\) ,其 Moore-Penrose 逆矩阵 \(A^+\in\mathbb C^ ...
- airsim+px4无人机仿真平台
0. 架构图 1. 主机列表 对应的ip地址与选择的系统,根据实际情况进行修改 主机IP 组件 系统 192.168.0.28 mavporxy linux-centos7.6 192.168.0.2 ...
- SV 并发线程
内容 assign d = a & b; assign e = b | c; begin...end之间的语句是串行执行的 fork....join语句是并行执行的 逻辑仿真工具中的并发性 仿 ...
- Chrony 的学习与使用
Chrony 的学习与使用 背景 之前捯饬 ntp 发现很麻烦, 经常容易弄错了. 昨天处理文件精确时间时 想到了时间同步. 发现只有自己总结的ntpdate 但是还没有 chronyd相关的总结 本 ...
- [转帖]ES集群开启X-pack认证
https://www.cnblogs.com/jclty/p/12913996.html 1.下载 1 # wget https://artifacts.elastic.co/downloads/e ...
- [转帖]金仓数据库KingbaseES数据目录结构
KingbaseES数据库结构 [kingbase@postgresV8]$ tree -LP2data/ . ├── data │ ├── base # 存储用户创建的数据库文件及隶属于用户数据库的 ...