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.父組件監(jiān)聽-->
<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++ //點擊數(shù)字自增一
this.$emit('change')//1.子組件向外觸發(fā)change函數(shù)，父組件<counter>監(jiān)聽
}
}
})
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獲取兩數(shù)之和
</script>
</body>
</html>
以上這篇vue點擊自增和求和的實例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
高階組件HOC在React社區(qū)是非常常見的概念,但是在Vue社區(qū)中卻是很少人使用,但其實在一些特殊的場景使用他就可以很優(yōu)雅的解決一些問題,下面就跟隨小編一起來了解下吧2025-01-01
今天小編就為大家分享一篇Vue.js點擊切換按鈕改變內(nèi)容的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
uni-app項目中引入Vant?UI組件庫完美避坑指南（純凈版）
網(wǎng)上百度uniapp使用vant時,很多答案都是在根路徑下創(chuàng)建文件夾,而且都是基于小程序環(huán)境的,其實uniapp可以直接使用的,這篇文章主要給大家介紹了關(guān)于uni-app項目中引入Vant?UI組件庫完美避坑指南的相關(guān)資料,需要的朋友可以參考下2024-02-02
淺談實現(xiàn)vue2.0響應(yīng)式的基本思路
這篇文章主要介紹了淺談實現(xiàn)vue2.0響應(yīng)式的基本思路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
今天小編就為大家分享一篇在Vue組件中獲取全局的點擊事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文以click為例給大家介紹vue.js中常用v-指令，可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript代碼，本文通過示例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧2021-10-10
插槽slot可以說在一個Vue項目里面處處都有它的身影，比如我們使用一些UI組件庫的時候，我們通?？梢允褂貌宀蹃碜远x我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2022-09-09
Vue 實現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)
今天小編就為大家分享一篇Vue 實現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解
這篇文章主要介紹了vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解,這樣實現(xiàn)了既跳轉(zhuǎn)了新頁面,又不會讓后端檢測到頁面鏈接不安全之類的,需要的朋友可以參考下2023-10-10
vue + vuex todolist的實現(xiàn)示例代碼
這篇文章主要介紹了vue + vuex todolist的實現(xiàn)示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03