零基础入门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数组.至于什么叫做类,暂时不做过多介绍,在之后的篇章中 ...
随机推荐
- 【iOS源码混淆工具】iOS代码混淆工具
主要功能 Ipa Guard是一款功能强大的ipa混淆工具,不需要ios app源码,直接对ipa文件进行混淆加密.可对IOS ipa 文件的代码,代码库,资源文件等进行混淆保护. 可以根据设置对函数 ...
- java进阶(17)--Random
一.Random随机数 java.unil.Random类 Random randomnum = new Random(); int num = randomnum.nextInt(); 二.举例 ...
- 使用XStream，XMLSerializer 解析及格式转换
博主原创,转载请注明出处 1.引入对应的maven依赖: <!--xstream--> <dependency> <groupId>com.thoughtworks ...
- Servlet系列：生命周期（init、 service、destroy）详解
Servlet的生命周期是由Web容器(如Tomcat)管理的,包括以下三个阶段: 加载和实例化:当Web应用程序启动时,Web容器会加载和实例化Servlet.加载和实例化过程可以在应用程序启动时自 ...
- 【Linux】技术收集
Linux进程间通信(六)---信号量通信之semget().semctl().semop()及其基础实验 https://blog.csdn.net/mybelief321/article/deta ...
- 【C++】枚举作为类函数返回值时需定义在使用之前
枚举定义在前,作为函数返回值在后 枚举定义在后,则函数返回值需用普通类型
- Redis-主从复制-哨兵模式
- [转帖]Oracle数据库下PreparedStatementCache内存问题解决方案
https://github.com/alibaba/druid/wiki/Oracle%E6%95%B0%E6%8D%AE%E5%BA%93%E4%B8%8BPreparedStatementCac ...
- [转帖]深入理解Redis的scan命令
熟悉Redis的人都知道,它是单线程的.因此在使用一些时间复杂度为O(N)的命令时要非常谨慎.可能一不小心就会阻塞进程,导致Redis出现卡顿. 有时,我们需要针对符合条件的一部分命令进行操作,比如删 ...
- [转帖]Intel、海光、鲲鹏920、飞腾2500 CPU性能对比
https://plantegg.github.io/2021/06/18/%E5%87%A0%E6%AC%BECPU%E6%80%A7%E8%83%BD%E5%AF%B9%E6%AF%94/ Int ...