技术文章
当前位置:首页 > vue.js技术文章 > vue数据操作之点击事件实现num加减功能示例

vue点击事件实现num加减的实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:197

这篇文章主要知识点是关于vue、数据操作、点击事件、num、加减、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue企业开发实战
  • 类型:Vue.js实战大小:109.6 MB格式:PDF出版:人民邮电出版社作者:肖睿
立即下载

更多Vue相关的学习资源可以参阅 Vue电子书程序设计电子书 等栏目。

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

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行结果:

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

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

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vue中获取token写进header的实、 vue-cli项目中缩短首屏加载、 Vue动态创建注册component的、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:element-ui中的select下拉列设置的实例代码

下一篇:vue axios中文文档知识点概述

展开 +

收起 -

vue数据操作 相关电子书
学习笔记
网友NO.778513

浅析vue数据绑定

前言:最近团队需要做一个分享,脚进脑子,不知如何分享。最后想着之前一直想研究一下 vue 源码,今天刚好 “借此机会” 研究一下。 网上研究vue数据绑定的文章已经非常多了,但是自己写一遍,敲一遍demo和看别人的文章是完全不同的,so……搬运工来了 目前数据绑定主要有以下三种实现方式: 1. 脏值检查(angular.js) 轮询检测数据变化 DOM事件,譬如用户输入文本,点击按钮等。( ng-click ) XHR响应事件 ( $http ) 浏览器Location变更事件 ( $location ) Timer事件( $timeout , $interval ) 执行 $digest() 或 $apply() 2、Object.defineProperty劫持对象的get、set,从而实现对数据的监控。 (vue) 3、发布/订阅者模式实现数据与视图的自动同步 Object.defineProperty的优点 “脏值检测”——数据发生变更后,对于所有的数据和视图的绑定关系进行一次检测,识别是否有数据发生了改变……

网友NO.403852

Vue数据驱动表单渲染,轻松搞定form表单

form-create 具有动态渲染、数据收集、校验和提交功能的表单生成器,支持双向数据绑定、事件扩展以及自定义组件,可快速生成包含有省市区三级联动、时间选择、日期选择等17种功能组件。 Github | 文档 form-create 是基于 Vue开发的开源项目,可快速生成 iviewUI 的表单元素。目的是节省开发人员在表单页面上耗费的时间,从而更专注于功能开发。使用 form-creae 可快速、便捷的生成日常开发中所需的各种表单。 下面向大家介绍一下 form-create 使用方法和生成原理 演示 生成器 如何优雅的创建动态生成一个 input 输入框。 内置了规则生成器,用来生成组件规则的助手方法,通过链式操作即可快速生成对应的组件规则。 json 使用 json 数据生成。可通过后端返回生成规则,进行渲染。 php 表单生成器,这是我的另外一个开源项目。通过php生成表单规则,前端可使用……

网友NO.554648

vue数据传递--我有特殊的实现技巧

前言 最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围。所以简单的写一下。同时有一种特殊的实现方案。 有这么几种数据传递方式,vuex、props、eventBus和特殊的eventBus。 vuex 不介绍,数据量和复杂度达不到不用它你才会向下看。 props demo 父子组件传值,官方api,只写个demo。 1.父组件 son :info="info" @update="updateHandler"/// datainfo: 'sendToSon'// methodsupdateHandler (newVal) { this.info = newVal} 2.子组件 // propsprops: ['info']// 向上传值,某个方法中使用this.$emit('update', 'got') 父向子传值--props 子向父传值--子组件绑定事件回调定义在父组件,子组件触发此事件。 因不推荐子组件内直接修改父组件传入的props,需使用自定义事件。 限制 父子组件。 eventBus demo bus皆为导入的bus实例 // busconst bus = new Vue()// 数据接收组件// 当前组件……

网友NO.211787

Vue数据驱动模拟实现2

一、前言 在随笔“模拟Vue之数据驱动1”结尾处,我们说到如果监听的属性是个对象呢?那么这个对象中的其他属性岂不就是监听不了了吗? 如下: 倘若user中的name、age属性变化,如何知道它们变化了呢? 今儿,就来解决这一问题。 通过走读Vue源码,发现他是利用Observer构造函数为每个对象创建一个Observer对象,来监听数据的,如果数据中的属性又是一个对象,那么就又通过Observer来监听嘛。 其实,核心思想就是树的先序遍历(关于树,可参考here)。如我们将上述Demo中的data数据,图形化一下,就更加明白了,如下: 好了,理清了大体思路,下面我们就一起来创建一个Observer吧。 二、Observer构造 Observer整体结构如下: function Observer(data){ //如若this不是Observer对象,即创建一个 if(!(this instanceof Observer)){ return new Observer(data); } this.data = data; this.walk(data); }……

网友NO.571490

Vue数据绑定实例写法

为什么绑定 简单的数据渲染,包括表达式、函数在内。其实都只是在标签中渲染,如果遇到以下情况怎么办呢: 需要在标签内部进行某种 "骚操作" 。 需要控制流来控制不同数据下的不同渲染效果。 需要渲染一个数组。 这时候简单渲染就不能很好的解决问题了,怎么办 ? 来一发数据绑定吧! 绑定是什么 在了解绑定是什么之前,先了解一下什么是指令: 在 " vue" 中,指令是带有 v- 前缀的特殊属性,用来修饰标签的(自定义组件在这里也统一归为标签,因为其使用方式和原生标签一样),其值的约束和模板语法一样,支持表达式、变量。 指令会监测其值的变化,并将其的变化反应给所处的DOM 我们来看一下上一章最后的例子: h1{{ if(msg == '1') return time }}/h1 在这里我们是想利用控制流来控制是否显示时间,但是很遗憾,模板语法并不支持js语法。 但是……

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息