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的温度计动画效果
Jun 18 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 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制作动态随机验证码
2015/02/12 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
python如何操作mysql
2020/08/17 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
python实现学生信息管理系统源码
2021/02/22 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
金蝶的一道SQL笔试题
2012/12/18 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
感恩主题班会教案
2015/08/12 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
利用Python判断你的密码难度等级
2021/06/02 Python