零基础入门Vue之皇帝的新衣——样式绑定

  • 零基础入门Vue之皇帝的新衣——样式绑定已关闭评论
  • 18 次浏览
  • A+
所属分类:Web前端
摘要

大致掌握了上一节的 插值语法 我已经可以把想要的数据显示到页面上,并且仅需要修改变量,页面就会跟着实时改变


回顾

大致掌握了上一节的 插值语法 我已经可以把想要的数据显示到页面上,并且仅需要修改变量,页面就会跟着实时改变

但如果对于已经熟悉前端的人来说,单单有数据还是不太行,还需要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

本节完~~~~~~