vue实现动态按钮功能


Posted in Javascript onMay 13, 2019

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

Javascript 相关文章推荐
javascript 子窗体父窗体相互传值方法
May 31 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
JS实现无缝循环marquee滚动效果
May 22 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
详解小程序之简单登录注册表单验证
May 13 #Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 #Javascript
vue项目前端知识点整理【收藏】
May 13 #Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
koa+mongoose实现简单增删改查接口的示例代码
May 13 #Javascript
You might like
如何隐藏你的.php文件
2007/01/04 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
php查询whois信息的方法
2015/06/08 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
详解jQuery中的事件
2016/12/14 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
python unittest实现api自动化测试
2018/04/04 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
Python函数返回不定数量的值方法
2019/01/22 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
党员群众路线对照检查材料
2014/08/31 职场文书
店铺转让协议书
2015/01/29 职场文书