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


Posted in Javascript onNovember 06, 2019

如下所示:

<!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点击自增和求和的实例代码

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

Javascript 相关文章推荐
文本链接逐个出现的js脚本
Dec 12 Javascript
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
js DOM模型操作
Dec 28 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
解决vue 表格table列求和的问题
Nov 06 #Javascript
JavaScript如何借用构造函数继承
Nov 06 #Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 #Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 #Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 #Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 #Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 #Javascript
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
python实现进程间通信简单实例
2014/07/23 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python实现网页录音效果
2020/10/26 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
经济类毕业生求职信
2014/06/26 职场文书
要账委托书范本
2014/09/15 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
国王的演讲观后感
2015/06/03 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript