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点击自增和求和的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue项目实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要介绍了vue源码nextTick使用及原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
基于element-ui对话框el-dialog初始化的校验问题解决
这篇文章主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
在Vue中，通过使用动态组件，我们可以实现组件的动态切换，从而达到页面的动态展示效果，这篇文章主要介绍了vue、uniapp实现组件动态切换,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了uni-app 常用API，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue3+vite+antd如何实现自定义主题问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了你准备好迎接vue3.0了吗,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
下面小编就为大家分享一篇vue 全选与反选的实现方法(无Bug 新手看过来)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
在数据分析和可视化领域,经常需要以表格的形式展示数据,Plotly.js 是一款功能强大的 JavaScript 库,不仅可以创建交互式图表,还可以动态生成 HTML 表格,本文给大家介绍了如何用Vue3和Plotly.js创建交互式表格,需要的朋友可以参考下2024-07-07
vue2的时候使用的是字体图标,缺点就是比较单一,到了vue3,相信浏览器的性能起来,所以这里记录一下,下面这篇文章主要给大家介绍了关于vue3+vite2中使用svg的相关资料,需要的朋友可以参考下2022-08-08
最新评论