vue点击自增和求和的实例代码

如下所示：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>ref</title>
 <script type="text/javascript" src="js/vue.js" ></script>
 </head>
 <body>
 <div id="root">
  <counter></counter>
  <counter></counter>
 </div>
 <script>
  Vue.component('counter',{
  template:'<div @click="handleClick">{{number}}</div>',
  data:function () {
   return {
   number:0
   }
  },
  methods:{
   handleClick:function () {
   this.number++
   }
  }

  })
  var vm = new Vue({
  el:'#root',

  })
 </script>
 </body>
</html>

求和 

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>ref</title>
 <script type="text/javascript" src="js/vue.js" ></script>
 </head>
 <body>
 <div id="root">
  <counter ref="one" @change="handleChange"></counter><!--2.父组件监听-->
  <counter ref="two" @change="handleChange"></counter>

  <div >{{total}}</div><!--//子组件向父组件传值--><!--求和-->
 </div>
 <script>
  Vue.component('counter',{
  template:'<div @click="handleClick">{{number}}</div>',
  data:function () {
   return {
   number:0
   }
  },
  methods:{
   handleClick:function () {
   this.number++   //点击数字自增一
   this.$emit('change')//1.子组件向外触发change函数，父组件<counter>监听
   }
  }

  })
  var vm = new Vue({
  el:'#root',
  data:{
   total:0
  },
//  3.在父组件里定义handleChange方法
  methods:{
   handleChange:function () {
   this.total=this.$refs.one.number + this.$refs.two.number
   console.log(this.$refs.one.number)
   console.log(this.$refs.two.number)
  }
  }
  })
//  4.在counter里定义ref="one"
//  5.在vue里定义 console.log(this.$refs.one) 再通过number获取自增的值
//     6.通过total获取两数之和
 </script>
 </body>
</html>

以上这篇vue点击自增和求和的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于vue中的ajax请求和axios包问题

    在vue中,经常会用到数据请求,常用的有:vue-resourse.axios 今天我说的是axios的post请求 github源文件及文档地址:[https://github.com/axios/axios] + 首先,引入axios CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> npm: npm install axios 并在全局的js中引入:import a

  • 解决vue 表格table列求和的问题

    最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几乎满足需求了,但是还有个小问题就是列求和没搞定,这可咋整啊.看了element-ui是有这么个功能,遂翻开源码看了下也没看出啥话头,心想算了,自己来实现,网上搜了下,偶然看到一位仁兄的写法,拿过来稍微修改了下,果真是有用,在此感谢那位仁兄!(我本身对前端不专业,侧后端) 下面贴代码: /** jav

  • Vue-resource实现ajax请求和跨域请求示例

    vue-resource是Vue提供的体格http请求插件,如同jQuery里的$.ajax,用来和后端交互数据的. 在使用时,首先需要安装vue-resource插件 1.在项目跟目录上安装: npm install vue-resource 2.引入resource插件 import VueResource from 'vue-resource'; Vue.use(VueResource) 3.发送请求: this.$http.get("http://www.vrserver.applinz

  • Vue监听事件实现计数点击依次增加的方法

    1.实现计数器功能,每点击一次按钮,count值增加一或增加二,鼠标在cordinates行移动时会更新当前坐标,通过自定义函数或者stop属性禁止事件传播. 效果如下: 代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>计数器自增函数</title> <script src="vue.js"></s

  • vue发送websocket请求和http post请求的实例代码

    先给大家介绍下vue发送websocket请求和http post请求 直接上代码: pdf.vue <script> import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; import qs from "qs" export default { name: "pdf", data() { return { newsData: [], tagGuid_mx: "&quo

  • vue点击自增和求和的实例代码

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ref</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id=&qu

  • vue实现树形结构增删改查的示例代码

    vue实现树形结构增删改查的示例代码

    其实很多公司都会有类似于用户权限树的增删改查功能,正好最近我刚写了一个树形结构的增删改,在这里和大家分享一下,如果有不合理的地方欢迎评论,我会尽快优化~~ 先附上一下效果图 这个是没有点击编辑时,产品的需求是选中某个节点,取得该节点对应的设备数据,所以初始页面是下面这个样子的. 这个是点击了编辑之后,显示节点的编辑按钮 点击最上面的添加按钮,显示最外层父节点的添加画面 修改节点名称 因为我们的需求是编辑与非编辑两种状态,所以我用了两个树形组件,通过v-if进行控制.(v-if:该组件不存在,v-

  • Vue.js 点击按钮显示/隐藏内容的实例代码

    实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

  • Vue.js动态添加、删除选题的实例代码

    Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • Vue实现按钮旋转和移动位置的实例代码

    Vue实现按钮旋转和移动位置的实例代码

    1.静态效果图 Chrom移动端浏览模式下可拖动按钮处于任意位置,并且点击可旋转按钮 2.代码 <template> <div id="app"> <div class="icon-add-50" :style="iconstyle" @click='click' @touchmove='touchmove' @touchstart='touchstart(this,$event)' @touchend='touch

  • Vue组件之高德地图地址选择功能的实例代码

    注:本文基于上一篇文章[Vue-Cli 3.0 中配置高德地图 ] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图 二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2. 如果没有传入坐标点,则定位到当前所在位置 3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动 标记 来调整定位点 5. 标记 拖动后,右侧要显示拖动后的经纬度和地址 6. 点击确定按钮,返回最后的坐标点和地名给父组件 三. 组件实现具体代码 <template> <div cla

  • vue悬浮可拖拽悬浮按钮的实例代码

    前言 vue开发手机端悬浮按钮实现,可以拖拽,滚动的时候收到里边,不影响视线 github地址 使用,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 vue-h5-template 后续将发布各种商城组件组件,让商城简单高效开发 线上体验 使用 将 src/components文件夹下的s-icons组件放到你的组件目录下 使用组件 // template <template> <div> <

  • Vue实现Header渐隐渐现效果的实例代码

    新建header.vue组件 引入到父组件Detail.vue中 header.vue 通过router-link标签设置to属性为地址,实现点击返回首页 tag标签设为div,就有了div的属性 <template> <div class="header"> <router-link tag="div" to="/" class="header-abs"> <div class=&q

  • vue element-ul实现展开和收起功能的实例代码

    实现效果如下: 需求: 由于后台搜索选项有很多,影响页面美观,所以一进来要隐藏一部分搜索项,只保留1行, 点击[展开搜索]按钮的时候才显示全部,点击[收起搜索]按钮又收起部分,保留1行. 需求分析: 由于不太好控制行数,因为不同屏幕尺寸展示的1行的内容并不相同(不考虑移动端),所以考虑用显示高度来控制. 解决思路: 所以这里通过控制搜索区域的高度来实现展开和收起搜索功能. 页面一进来是收起搜索状态,控制搜索区域的高度为120px,超出部分隐藏. 点击展开搜索的时候,调整搜索区域的高度为"auto

  • vue中keep-alive内置组件缓存的实例代码

    需求: home 组件中有一个 name 的 data 数据.这个数据修改之后,再切换到其他的组件.再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值.希望组件有缓存. keep-alive 的使用方式: 将要缓存的组件使用 keep-alive 包裹住即可. keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子.也就是说不会销毁了. 2. 切换回来时,也不会重新创建.(既然都没有被销毁,哪里来的重新创建呢) 3. 会多出两个生命周期

随机推荐