vuejs点击class变化的实例

时间：2021-05-26

如下所示：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue.js小demo</title> <style> .static{ width: 100px; height: 60px; margin:30px auto; display: inline-block; cursor: pointer; } .class-a{ background: lightpink; } .class-b{ background: #eee; } </style></head><body> <div id="content"> <span class="static" v-bind:class="{'class-a':isA,'class-b':!isA}" @click="toggle"></span></div></body><script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script><script>var vm=new Vue({ el:"#content", data:function(){ return { isA:false }; }, methods:{ toggle:function(){ this.isA=!this.isA; } }}); </script></html>

以上这篇vuejs点击class变化的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章