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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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的实现代码
2011/08/08 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
Python struct.unpack
2008/09/06 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python2与Python3的区别详解
2020/02/09 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
python的setattr函数实例用法
2020/12/16 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
英文版区域经理求职信
2013/10/23 职场文书
高中军训感言1000字
2014/03/01 职场文书
建筑工地宣传标语
2014/06/18 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android