这篇文章主要介绍如何使用vue实现动态按钮功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
具体效果图如下:
点击后会变成这样:
首先我们需要下载vue.js: https://vuejs.org/js/vue.min.js
将网页内的内容全选粘贴至js文件中
然后我们先创建一个html文件
在body创建一个按钮具体代码如下:
计算
安全
数据库
网络和加速
企业服务
<body>
<div id="app">
<button v-on:click="btnClick" v-bind:class="my_cls">{{ msg }}</button>
</div>
</body>这里的v-on来为事件绑定方法，事件用 :事件名 标注
语法:v-on:事件名 = "事件变量"
事件变量:由vue实例的methods提供
按钮创建完成我们需要在body下进行script添加vue并设置点击事件:
具体代码如下:
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'按钮',
my_cls:'btn'
},
methods:{
btnClick:function(){
if(this.my_cls=='btn'){
this.my_cls='botton'
}else{
this.my_cls='btn'
}
}
}
})
</script>methods为事件提供实现体 进行点击来判断按钮的my_cls属性来实现具体效果
最后我们在head上设置style样式:
<style>
.btn {
width: 100px;
height: 40px;
background: orange;
}
.botton {
width: 200px;
height: 80px;
background-color: yellowgreen;
}
</style>以上是“如何使用vue实现动态按钮功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
