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 相关文章推荐
javascript getElementsByTagName
Jan 31 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
vue3.0 上手体验
Sep 21 Javascript
React实现todolist功能
Dec 28 Javascript
解决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中的Class的几点个人看法
2006/10/09 PHP
杏林同学录(九)
2006/10/09 PHP
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python+PIL实现支付宝AR红包
2018/02/09 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
C语言面试题
2013/05/19 面试题
大学生专科学习生活的自我评价
2013/12/07 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
总结几个非常实用的Python库
2021/06/26 Python
html5表单的required属性使用
2021/07/07 HTML / CSS
基于Python实现一个春节倒计时脚本
2022/01/22 Python
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android
mysql数据库如何转移到oracle
2022/12/24 MySQL