Vue 計(jì)數(shù)器的實(shí)現(xiàn)
更新時(shí)間：2021年10月26日 14:46:48 作者：Silent丿丶黑羽
這篇文章主要介紹了Vue 計(jì)數(shù)器的實(shí)現(xiàn)，主要利用HTML實(shí)現(xiàn)步驟現(xiàn)在頁(yè)面上簡(jiǎn)單實(shí)現(xiàn)一個(gè)計(jì)數(shù)器，內(nèi)容簡(jiǎn)單且詳細(xì),需要的朋友可以參考一下
1、計(jì)數(shù)器的實(shí)現(xiàn)
在頁(yè)面上簡(jiǎn)單實(shí)現(xiàn)一個(gè)計(jì)數(shù)器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>當(dāng)前計(jì)數(shù)器:{{counter}}</h3>
<button @click="add">+</button>
<button @click="minutes">-</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
add: function () {
this.counter++;
},
minutes: function () {
this.counter--;
}
}
})
</script>
</body>
</html>
2、實(shí)現(xiàn)效果
最后實(shí)現(xiàn)的效果，看下面的gif圖：
到此這篇關(guān)于Vue 計(jì)數(shù)器的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 計(jì)數(shù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+element ui實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要為大家詳細(xì)介紹了vue+element ui實(shí)現(xiàn)錨點(diǎn)定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
今天小編就為大家分享一篇在vue中阻止瀏覽器后退的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue3?Transition組件給頁(yè)面切換并加上動(dòng)畫效果
這篇文章主要給大家介紹了關(guān)于Vue3?Transition組件給頁(yè)面切換并加上動(dòng)畫效果的相關(guān)資料,vue的過(guò)渡動(dòng)畫主要是transition標(biāo)簽的使用,配合css動(dòng)畫實(shí)現(xiàn)的,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue之綁定class樣式與style樣式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue中利用Promise封裝jsonp并調(diào)取數(shù)據(jù)
Promise就是一個(gè)給一步操作提供的容器，在這個(gè)容器里，有兩個(gè)階段無(wú)法改變的階段，這兩個(gè)階段在文中給大家提到。對(duì)vue中利用Promise封裝jsonp并調(diào)取數(shù)據(jù) 的相關(guān)知識(shí)感興趣的朋友，跟隨小編一起看看吧2019-06-06
當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候,將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余,為了解決這個(gè)問(wèn)題我們可以使用mapState輔助函數(shù)幫助我們生成計(jì)算屬性,這篇文章主要給大家介紹了關(guān)于vuex狀態(tài)管理之mapState用法的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue穿梭框?qū)崿F(xiàn)上下移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了vue中的cookies緩存存值方式，超簡(jiǎn)單！具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vant中的toast層級(jí)改變操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了elementUi 中table表尾插入行的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07