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 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
python的等深分箱实例
2019/11/22 Python
基于python实现操作git过程代码解析
2020/07/27 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
秋季运动会广播稿
2014/02/22 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
事业单位聘任报告
2015/03/02 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS