使用v-bind处理class与style
Posted jiguiyan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用v-bind处理class与style相关的知识，希望对你有一定的参考价值。
普通的css引入：
变量引入：
通过定义一个变量fontColor来通过v-bind来进行绑定在h3z的class中
<!--变量引入-->
<h3 :class="fontColor">Vue</h3>
注意：v-bind后面必须跟一个属性或者一个方法
当然我们也可以通过数组的形式引入多个class：
html:
<!--以数组的形式引入多个-->
<h3 :class="[fontColor,fontBackgroundColor]">欢迎来到perfect*博客园</h3>
使用json对象的方式，在json中也可以使用多种方式
key是样式的名称，对应的值是一个boolean类型，相当于一个开关
HTML：
<!--使用json方式-->
<h3 :class="{myColor:flag,myBackgroundColor:!flag}">欢迎来到perfect*博客园</h3>
使用数组+json方式；
html:
<!--使用数组+json方式-->
<h3 :class="[fontSize,{myColor:flag,myBackgroundColor:flag}]">欢迎来到perfect*博客园</h3>
class中 写的是变量引入和json对象
绑定style：
HTML：
<!--绑定style：-->
<h3 :style="[colorA,colorB]">欢迎来到perfect*博客园</h3>
可以通过数组引入多个，引入一个时就不需要数组了，同绑定class相同，只是定义变量的值不一样。
以上示例所有代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-bind处理style与class</title> 6 <script src="../js/vue.js"></script> 7 8 <script> 9 10 11 window .onload= () =>{ 12 new Vue({ 13 el:"#one", 14 data:{ 15 fontColor:"myColor", 16 fontBackgroundColor:"myBackgroundColor", 17 flag:true, 18 fontSize:"myFontSize", 19 colorA:{color:‘rgb(53,73,93)‘}, 20 colorB:{backgroundColor:‘rgb(65,184,131)‘} 21 22 23 24 }, 25 methods:{ 26 27 28 } 29 }); 30 } 31 </script> 32 <style> 33 .myColor{ 34 color: rgb(53,73,93); 35 text-align: center; 36 } 37 .myBackgroundColor{ 38 39 background: rgb(65,184,131); 40 } 41 .myFontSize{ 42 font-size: 100px; 43 } 44 45 </style> 46 </head> 47 <body> 48 <div id="one"> 49 <!--普通的css引入--> 50 <!--<h3 class="myColor">Vue</h3>--> 51 52 <!--变量引入--> 53 <!--<h3 :class="fontColor">Vue</h3>--> 54 55 <!--以数组的形式引入多个--> 56 <!--<h3 :class="[fontColor,fontBackgroundColor]">欢迎来到perfect*博客园</h3>--> 57 58 <!--使用json方式--> 59 <!--<h3 :class="{myColor:flag,myBackgroundColor:!flag}">欢迎来到perfect*博客园</h3>--> 60 61 62 <!--使用数组+json方式--> 63 <!--<h3 :class="[fontSize,{myColor:flag,myBackgroundColor:flag}]">欢迎来到perfect*博客园</h3>--> 64 65 66 <!--绑定style：--> 67 <h3 :style="[colorA,colorB]">欢迎来到perfect*博客园</h3> 68 69 70 71 72 73 74 </div> 75 </body> 76 </html>
以上是关于使用v-bind处理class与style的主要内容，如果未能解决你的问题，请参考以下文章
Vue中Class和Style几种v-bind绑定的用法-详解案例