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 相关文章推荐
JS数组(Array)处理函数整理
Dec 07 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
Seajs源码详解分析
Apr 02 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
详解小程序之简单登录注册表单验证
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
使用eAccelerator加密PHP程序
2008/10/03 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
php导出CSV抽象类实例
2014/09/24 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
php socket通信简单实现
2016/11/18 PHP
纯js三维数组实现三级联动效果
2017/02/07 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
python实现数独算法实例
2015/06/09 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
python实现学生信息管理系统源码
2021/02/22 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
总经理职责范文
2013/11/08 职场文书
体育教师自荐信范文
2013/12/16 职场文书
《自选商场》教学反思
2014/02/14 职场文书
化学工程专业求职信
2014/08/10 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
结婚通知短信大全
2015/04/17 职场文书
行政复议答复书
2015/07/01 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
python3读取文件指定行的三种方法
2021/05/24 Python