首页 / VUE / vue实现动态按钮功能

vue实现动态按钮功能

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue实现动态按钮功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1110字，纯文字阅读大概需要2分钟。

内容图文

Vue是前台框架,可以独立完成前后端分离式web项目渐进式的javascript框架 ,今天我们来设计一个简单的动态按钮

具体效果图如下:

vue实现动态按钮功能 - 文章图片

点击后会变成这样:

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实现动态按钮功能，非常不错，具有一定的参考借鉴价值，需要的朋友参考借鉴价值。

内容总结

以上是互联网集市为您收集整理的vue实现动态按钮功能全部内容，希望文章能够帮你解决vue实现动态按钮功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/331807.html

来源：【匿名】