vue数据操作之点击事件实现num加减功能示例


Posted in Javascript onJanuary 19, 2019

本文实例讲述了vue数据操作之点击事件实现num加减功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue num加减</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <button v-on:click="add(10)">click me</button>
  <button v-on:click="remove(5)">click me</button>
  <button v-on:click="num++">click me</button>
  <button v-on:click="num--">click me</button>
  <span>{{num}}</span>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      num:0,
      message: '6',
      data: {
        name: '',
        gender: '',
        interest: [],
        identity: ''
      },
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    },
    methods:{
      add:function (inc){
        this.num += inc;
     },
      remove:function (dec){
        this.num -= dec;
      },
    }
  })
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

vue数据操作之点击事件实现num加减功能示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 #Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 #Javascript
vue-router命名视图的使用讲解
Jan 19 #Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 #Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 #Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 #Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 #Javascript
You might like
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
Yii2如何批量添加数据
2016/05/17 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
资料员的岗位职责
2013/11/20 职场文书
童装店创业计划书
2014/01/09 职场文书
汽车促销活动方案
2014/03/31 职场文书
环保建议书600字
2014/05/14 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
拉贝日记观后感
2015/06/05 职场文书
七个Python必备的GUI库
2021/04/27 Python