小编给大家分享一下vuejs如何点击class变化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
如下所示:
<!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变化”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。