vue实现动态按钮功能
更新时间：2019年05月13日 17:20:48 作者：777ijBGly-
这篇文章主要介绍了vue实现动态按钮功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue是前台框架,可以独立完成前后端分离式web项目渐进式的javascript框架 ,今天我们来设计一个简单的动态按钮
具体效果图如下:
点击后会变成这样:
首先我们需要下载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实现动态按钮功能，非常不错，具有一定的参考借鉴价值，需要的朋友参考借鉴价值。
相关文章
这篇文章主要为大家详细介绍了如何使用Vue快速实现一个无缝轮播效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2024-04-04
这篇文章主要给大家介绍了关于vue3中defineEmits使用的相关资料,在Vue3中可以使用defineEmits函数来定义组件的自定义事件,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue如何限制只能输入正负数及小数,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue 实现axios拦截、页面跳转和token 验证，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
在实际的项目开发中,使用svg图标占用内存比图片更小,映入图片内存比较大,同时也适用于不同屏幕的尺寸,下面这篇文章主要给大家介绍了关于vue项目引入svg图标的完整步骤,需要的朋友可以参考下2022-10-10
ant-design-vue前端UI库,如何解决Table中时间格式化问题
这篇文章主要介绍了ant-design-vue前端UI库,如何解决Table中时间格式化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
今天小编就为大家分享一篇vue移动端微信授权登录插件封装的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue中插入HTML代码的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了.eslintrc配置目录及配置项的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue中ref和e.target的区别以及ref用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论