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 相关文章推荐
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
Angular.JS中的this指向详解
2017/05/17 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
Vue指令指令大全
2019/02/09 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
编写Python的web框架中的Model的教程
2015/04/29 Python
Python实现的彩票机选器实例
2015/06/17 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
python中kmeans聚类实现代码
2018/02/23 Python
python数据封装json格式数据
2018/03/04 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
公司任命书范本
2014/06/04 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书