1.对class属性进行绑定
<style> .app { width: 200px; height: 200px; background-color: purple; } .app1 { width: 100px; height: 100px; background-color: aqua; } </style> <body> <div class="app" :class="data1"> <button @click="fn">切换模式</button> </div> </body> <script> new Vue({ el:".app", data:{ data1:"app", flag:true }, methods:{ fn(){ this.flag=!this.flag if(this.flag==true){ this.data1="app" }else{ this.data1="app1" } } } }) </script>
2.对style属性的绑定
<body> <div id="app"> <button @click="fn">切换</button> <div :style='{color:color,fontSize:fontsize,backgroundColor:n,width:"200px",height:"200px"}'>放学咯!!!!</div> </div> </body> <script> new Vue({ el:"#app", data:{ color:"red", fontsize:"20px", flag:true, n:"purple" }, methods:{ fn(){ this.flag=!this.flag if(this.flag==true){ this.color="red" this.fontsize="14px" this.n="purple" }else{ this.color="blue" this.fontsize="20px" this.n="green" } } } }) </script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。