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实现动态按钮功能，非常不错，具有一定的参考借鉴价值，需要的朋友参考借鉴价值。
相关文章
本文主要介绍了el-form-item表单label添加提示图标的实现,我们将了解El-Form-Item的基本概念和用法,及添加提示图标以及如何自定义图标样式,感兴趣的可以了解一下2023-11-11
这篇文章主要介绍了vue实现图片懒加载的方法,结合实例形式分析了vue.js图片懒加载插件安装、使用方法与相关操作注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue-cli设置css不生效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
关于Vue3中element-plus的el-dialog对话框无法显示的问题及解决方法
最近今天在写一个停车场管理系统的项目时,在用vue3写前端时,在前端模板选择上,我一时脑抽,突然决定放弃SpringBoot,选择了以前几乎很少用的element-plus,然后果不其然,错误连连,下面给大家分享dialog对话框无法显示的原因,感兴趣的朋友一起看看吧2023-10-10
本篇文章主要介绍了Vue常用指令_V-model用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
vue3+vite+ts使用require.context问题
这篇文章主要介绍了vue3+vite+ts使用require.context问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
自带气泡提示的vue校验插件（vue-verify-pop）
这篇文章主要为大家详细介绍了自带气泡提示的vue校验插件，vue-verify-pop的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要为大家详细介绍了vue实现上传图片添加水印的升级版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Element UI table参数中的selectable的使用及遇到坑
这篇文章主要介绍了Element UI table参数中的selectable的使用及遇到的坑，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
在前端开发中我们通常会遇到这样的需求,用户离开、刷新页面前,修改数据未进行保存操作,需要提示框提醒用户,这篇文章主要给大家介绍了关于vue监听浏览器网页关闭和网页刷新事件的相关资料,需要的朋友可以参考下2023-08-08
最新评论