脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue点击自增和求和

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

 更新时间：2019年11月06日 16:52:58   作者：依米_  
今天小编就为大家分享一篇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点击自增和求和的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue3实现高阶组件HOC的示例详解

    Vue3实现高阶组件HOC的示例详解

    高阶组件HOC在React社区是非常常见的概念,但是在Vue社区中却是很少人使用,但其实在一些特殊的场景使用他就可以很优雅的解决一些问题,下面就跟随小编一起来了解下吧
    2025-01-01
  • Vue.js点击切换按钮改变内容的实例讲解

    Vue.js点击切换按钮改变内容的实例讲解

    今天小编就为大家分享一篇Vue.js点击切换按钮改变内容的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • uni-app项目中引入Vant UI组件库完美避坑指南（纯净版）

    uni-app项目中引入Vant UI组件库完美避坑指南（纯净版）

    网上百度uniapp使用vant时,很多答案都是在根路径下创建文件夹,而且都是基于小程序环境的,其实uniapp可以直接使用的,这篇文章主要给大家介绍了关于uni-app项目中引入Vant UI组件库完美避坑指南的相关资料,需要的朋友可以参考下
    2024-02-02
  • 浅谈实现vue2.0响应式的基本思路

    浅谈实现vue2.0响应式的基本思路

    这篇文章主要介绍了浅谈实现vue2.0响应式的基本思路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 在Vue组件中获取全局的点击事件方法

    在Vue组件中获取全局的点击事件方法

    今天小编就为大家分享一篇在Vue组件中获取全局的点击事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 解析vue.js中常用v-指令

    解析vue.js中常用v-指令

    本文以click为例给大家介绍vue.js中常用v-指令，可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript代码，本文通过示例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧
    2021-10-10
  • Vue中slot插槽作用与原理详解

    Vue中slot插槽作用与原理详解

    插槽slot可以说在一个Vue项目里面处处都有它的身影，比如我们使用一些UI组件库的时候，我们通常可以使用插槽来自定义我们的内容，这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下
    2022-09-09
  • Vue 实现把表单form数据 转化成json格式的数据

    Vue 实现把表单form数据 转化成json格式的数据

    今天小编就为大家分享一篇Vue 实现把表单form数据 转化成json格式的数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue 跳转页面$router.resolve和$router.push案例详解

    vue 跳转页面$router.resolve和$router.push案例详解

    这篇文章主要介绍了vue 跳转页面$router.resolve和$router.push案例详解,这样实现了既跳转了新页面,又不会让后端检测到页面链接不安全之类的,需要的朋友可以参考下
    2023-10-10
  • vue + vuex todolist的实现示例代码

    vue + vuex todolist的实现示例代码

    这篇文章主要介绍了vue + vuex todolist的实现示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论