Vue2入门之超详细教程十-绑定class、style样式
1、简介
绑定样式：
1. class样式
写法：class=”xxx” xxx可以是字符串、对象、数组
字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
2. Style样式
:style=”{fontSize:xxx}”其中xxx是动态值
:style=”[a,b]”其中a、b是样式对象
学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知识 传送门。
2、Class绑定
1. 字符串绑定class
在vscode中创一个新目录，叫“09_绑定样式”，在下面创建一个“1字符串-绑定样式.html”文件，在里面输入以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/development/vue.js"></script> <style> .basic{ width:400px; height:100px; border:1px solid black; } .happy{ border: 4px solid red; background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border:1px solid green; } .normal{ } .atguigu1{ } .atguigu2{ font-size:30px; /* box-shadow: 0 0 20px black; */ text-shadow: 0 0 20px yellow; } .atguigu3{ border-radius: 20px; } </style> </head> <body> <div id="root"> <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --> <div class="basic" :class="mood" @click="changeMood">{{name}}</div> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'Mr Li', mood:'normal' }, methods:{ changeMood(){ this.mood = 'happy' } }, }) </script> </body> </html>
该代码和以前代码类似，知识多了CSS样式部分，这里不对CSS样式内容做过多解释，如果实在看不懂记住简单内容即可.是class类型绑定，用来绑定HTML代码中class样式，给出了不同的样式
如果要使用Vue绑定class可以利用学过的v-bind方法，当用户点击后改变class的变量内容，以上代码是字符串写法，适用于：样式类名不确定，需要动态指定的场景
现在以上面案例做改变，需要当用户点击时，随机应用happy、sad、normal样式，代码如下：
<script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'Mr Li', mood:'normal' }, methods:{ changeMood(){ const arr = ['happy','sad','normal'] const index = Math.floor(Math.random()*3) this.mood = arr[index] } }, }) </script>
其他地方不用改变，唯一变的是changeMood方法内的内容，以前是直接赋值为happy，现在是使用Math方法成功一个随机数const arr = ['happy','sad','normal']这是一个数组，里面有三个值，Math.random()方法可以得到一个0到1的随机数，该数不可能是1，Math.floor()方法可以取整，里面它们两个的组合就能获得一个0到2的整数，作为数组的下标，这样就实现了一个随机应用样式的案例。
2. 数组绑定class
创建一个“2数组-绑定样式.html”文件，在里面输入以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/development/vue.js"></script> <style> .basic{ width:400px; height:100px; border:1px solid black; } .happy{ border: 4px solid red; background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border:1px solid green; } .normal{ } .atguigu1{ } .atguigu2{ font-size:30px; /* box-shadow: 0 0 20px black; */ text-shadow: 0 0 20px yellow; } .atguigu3{ border-radius: 20px; } </style> </head> <body> <div id="root"> <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 --> <div class="basic" :class="classArr" >{{name}}</div> </div> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Mr Li', mood:'normal', classArr:['atguigu1','atguigu2','atguigu3'] }, }) </script> </body> </html>
使用数组绑定class的方法即在data中定义一个数组，里面放置要绑定的样式，用法还是用v-bind来绑定。
3. 对象绑定class
现在需求升级，需要绑定的样式数组不确定，如atguigu1和atguigu2两个样式，组合绑定，组合类型如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/development/vue.js"></script> <style> .basic{ width:400px; height:100px; border:1px solid black; } .happy{ border: 4px solid red; background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border:1px solid green; } .normal{ } .atguigu1{ } .atguigu2{ font-size:30px; /* box-shadow: 0 0 20px black; */ text-shadow: 0 0 20px yellow; } .atguigu3{ border-radius: 20px; } </style> </head> <body> <div id="root"> <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 --> <div class="basic" :class="classObj" >{{name}}<br> </div> </div> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Mr Li', mood:'normal', classObj:{ atguigu1:false, atguigu2:false, } }, }) </script> </body> </html>
我们可以利用一个对象classObj为false表示不生效，后面可以自己操作是否生效。
4. 对象绑定style
样式可以直接卸载style中的，那怎么使用Vue直接绑定style呢？
正常写style样式如下：
<div class="basic" style="font-size:40px" >{{name}}<br>
如果想使用Vue可以如下：
<div class="basic" :style="{fontSize: fsize+'px'}" >{{name}}<br>
fsize是提前在Vue中定义的变量，完整代码如下
这种写法有点不美观，我们可以把表达式放到Vue中去，style中只写一个对象名，如下：
<div class="basic" :style="styleObj" >{{name}}<br>
完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/development/vue.js"></script> <style> .basic{ width:400px; height:100px; border:1px solid black; } .happy{ border: 4px solid red; background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border:1px solid green; } .normal{ } .atguigu1{ } .atguigu2{ font-size:30px; /* box-shadow: 0 0 20px black; */ text-shadow: 0 0 20px yellow; } .atguigu3{ border-radius: 20px; } </style> </head> <body> <div id="root"> <!-- 绑定style样式----> <div class="basic" :style="styleObj" >{{name}}<br> </div> </div> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Mr Li', mood:'normal', fsize:40, styleObj:{ fontSize: '40px', backgroundColor: 'red' } }, }) </script> </body> </html>
5. 数组绑定style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/development/vue.js"></script> <style> .basic{ width:400px; height:100px; border:1px solid black; } .happy{ border: 4px solid red; background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border:1px solid green; } .normal{ } .atguigu1{ } .atguigu2{ font-size:30px; /* box-shadow: 0 0 20px black; */ text-shadow: 0 0 20px yellow; } .atguigu3{ border-radius: 20px; } </style> </head> <body> <div id="root"> <!-- 绑定style样式----> <div class="basic" :style="styleArr" >{{name}}<br> </div> </div> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Mr Li', mood:'normal', fsize:40, styleArr:[ { fontSize: '40px', }, { backgroundColor: 'gray' } ] }, }) </script> </body> </html>
这种方式不常用
3、小结
Style写法如果两个单词拼接比如font-size需要写成fontSize形式
