当前位置:主页 > vue.js教程 > vue实现动态按钮功能

vue实现动态按钮实例代码

发布:2020-01-26 12:40:58 102


为找教程的网友们整理了vue相关的编程文章,网友融心远根据主题投稿了本篇教程内容,涉及到vue、动态按钮、vue实现动态按钮功能相关内容,已被994网友关注,相关难点技巧可以阅读下方的电子资料。

vue实现动态按钮功能

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


参考资料

相关文章

  • 详解用vscode开发vue应用

    发布:2020-01-27

    这篇文章主要介绍了用vscode开发vue应用的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • Vue.js项目API、Router配置拆分实践

    发布:2019-12-07

    这篇文章主要介绍了详解Vue.js项目API、Router配置拆分实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 实例讲解如何在vue-loader中引入模板预处理器

    发布:2020-02-10

    这篇文章主要介绍了vue-loader中引入模板预处理器的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • 详解vue组件中使用iframe元素

    发布:2020-03-17

    本篇文章主要介绍了vue组件中使用iframe元素的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • Vue+ElementUI项目怎样使用webpack输出MPA

    发布:2020-02-04

    这篇文章主要介绍了Vue+ElementUI项目使用webpack输出MPA的方法,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下


  • 实例详解vue拦截器Vue.http.interceptors.push

    发布:2020-01-09

    这篇文章主要为大家详细介绍了vue拦截器Vue.http.interceptors.push的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • Vue实现图片上传方式

    发布:2020-02-04

    在项目中经常会遇到图片上传功能,今天脚本之家小编给大家带来了使用Vue实现图片上传的三种方式,感兴趣的朋友一起看看吧


  • 异步组件优化Vue应用程序性能的详解

    发布:2020-02-19

    这篇文章主要介绍了使用异步组件优化Vue应用程序的性能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


网友讨论