标签：info vat color 使用数组 red code width OLE func
点击文字切换颜色
1.
<!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>Vue中的样式绑定</title> </head> <style> .activated{ color: blueviolet; } </style> <body> <!-- 这个元素有一个class样式，叫做 activated，是否使用activated取决于isActivated--> <div id="app" @click="handleDivClick" :class="{activated:isActivated}" >颜色</div> </body> <script> var vm=new Vue({ el:"#app", data:{ isActivated:false }, methods:{ handleDivClick:function(){ this.isActivated=!this.isActivated } } }) </script> </html>
点击后=>
2.
<!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>Vue中的样式绑定</title> </head> <style> .activated{ color: red; } </style> <body> <!-- 这个元素有一个class样式，class可以和数组进行绑定，class的样式取决于className的内容，className可以在vue实例中进行赋值或改变--> <div id="app" @click="handleDivClick" :class="[className]" >颜色</div> </body> <script> var vm=new Vue({ el:"#app", data:{ isActivated:false, className:"" }, methods:{ handleDivClick:function(){ this.className=this.className==="activated"?"":"activated"; } } }) </script> </html>
数组中可以有多个值。
点击后=>
3.
也可以对style进行绑定，如下：
<!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>Vue中的样式绑定</title> </head> <body> <div id="app" @click="handleDivClick" :style="styleObj" >颜色</div> </body> <script> var vm=new Vue({ el:"#app", data:{ styleObj:{ color:‘black‘ } }, methods:{ handleDivClick:function(){ this.styleObj.color=this.styleObj.color===‘black‘?‘blue‘:‘black‘; } } }) </script> </html>
点击后=》
4.style也可以使用数组
<!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>Vue中的样式绑定</title> </head> <body> <div id="app" @click="handleDivClick" :style="[styleObj,{fontSize:‘20px‘}]" >颜色</div> </body> <script> var vm=new Vue({ el:"#app", data:{ styleObj:{ color:‘black‘ } }, methods:{ handleDivClick:function(){ this.styleObj.color=this.styleObj.color===‘black‘?‘blue‘:‘black‘; } } }) </script> </html>
样式绑定有两种方法，1.class ; 2.style。他们都可以通过数据来实现切换，同样也都可以通过数组进行绑定。
标签：info vat color 使用数组 red code width OLE func
原文地址：https://www.cnblogs.com/ellen-mylife/p/14071217.html
