绑定class属性
v-bind:class="{样式名称：变量}"<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>class属性绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style type="text/css"> .a { width: 200px; height: 200px; background-color: aliceblue; } </style> </head> <body> <div id="app"> <div v-bind:class="{a: isactive}"></div> </div> <script type="text/javascript"> new Vue({ el: '#app', data:{ isactive:true } }) </script> </body></html>
绑定多个样式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>class属性绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style type="text/css"> .a { width: 200px; height: 200px; background-color: aliceblue; } .b { background-color: red; } </style> </head> <body> <div id="app"> <div v-bind:class="{a: isactive,b:hasError}"></div> <hr > <div v-bind:class="{a: isactive,b:noError}"></div> </div> <script type="text/javascript"> new Vue({ el: '#app', data:{ isactive:true, hasError:true, noError:false, } }) </script> </body></html>
绑定数据里的一个对象
v-bind:class="对象名"<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>class属性绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style type="text/css"> .a { width: 200px; height: 200px; background-color: aliceblue; } .b { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="app"> <div v-bind:class="class1"></div> <hr > <div v-bind:class="class2"></div> </div> <script type="text/javascript"> new Vue({ el: '#app', data:{ class1:{ a:true, b:false, }, class2:{ a:false, b:true, } } }) </script> </body></html>
绑定一个数组
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>class属性绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style type="text/css"> .a { width: 200px; height: 200px; background-color: aliceblue; } .b { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="app"> <div v-bind:class="[c1]"></div> <hr > <div v-bind:class="[c1,c2]"></div> </div> <script type="text/javascript"> new Vue({ el: '#app', data:{ c1:'a', c2:'b', } }) </script> </body></html>
通过三目运算符绑定
表达式 ？ 代码1 ：代码2<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>class属性绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style type="text/css"> .a { width: 200px; height: 200px; background-color: aliceblue; } .b { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="app"> <div v-bind:class="m ? 'a' : '' "></div> <hr > <div v-bind:class="m ? 'b' : '' "></div> </div> <script type="text/javascript"> new Vue({ el: '#app', data:{ m:true } }) </script> </body></html>
style内联样式
v-bind:style="{样式1，样式2，样式3..}"<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>class属性绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <div>xiaowang</div> <div style="font-size: 20px;color: red;">xiaowang</div> <div v-bind:style="{color:'blue',fontSize:'30px'}">xiaowang</div> <div v-bind:style="{color: Color,fontSize: Size+'px'}">xiaowang</div> </div> <script type="text/javascript"> new Vue({ el: '#app', data:{ Color: 'blue', Size:25 } }) </script> </body></html>
style绑定样式对象
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>class属性绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <div>xiaowang</div> <div v-bind:style="s">xiaowang</div> </div> <script type="text/javascript"> new Vue({ el: '#app', data:{ s:{ color:"blue", fontSize:"30px" } } }) </script> </body></html>
style绑定样式数组
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>class属性绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <div>xiaowang</div> <div v-bind:style="[s1,s2]">xiaowang</div> </div> <script type="text/javascript"> new Vue({ el: '#app', data:{ s1:{ color:"blue"}, s2:{ fontSize:"30px"} } }) </script> </body></html>
灰太狼
小咪咪
怼烎@
我会带着你远行
还没有评论，来说两句吧...