回顾
大致掌握了上一节的 插值语法 我已经可以把想要的数据显示到页面上，并且仅需要修改变量，页面就会跟着实时改变
但如果对于已经熟悉前端的人来说，单单有数据还是不太行，还需要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
本节完~~~~~~
1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。
2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途
暂无评论内容