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前端頁(yè)面數(shù)據(jù)加載添加loading效果的實(shí)現(xiàn)
這篇文章主要介紹了vue前端頁(yè)面數(shù)據(jù)加載添加loading效果的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要分享vuex中mapState思想及應(yīng)用，在需求開(kāi)發(fā)過(guò)程中，有的接口返回的結(jié)果中有很多字段需要展示到頁(yè)面上。通?？梢詫⑦@些字段在.vue文件中封裝為計(jì)算屬性，或者重新將對(duì)應(yīng)字段賦值到 data 中的字段來(lái)達(dá)到便于使用的目的，具體內(nèi)容，我們一起來(lái)看下面文章內(nèi)容吧2021-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)計(jì)步器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
Vue3使用ResizeObserver監(jiān)聽(tīng)元素的尺寸寬度變化
要監(jiān)聽(tīng) div 寬度的變化,可以使用 ResizeObserver 接口,ResizeObserver 允許你觀察一個(gè)或多個(gè)元素的尺寸變化,并在發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù),所以本文給大家介紹了Vue3如何使用ResizeObserver監(jiān)聽(tīng)元素的尺寸寬度變化,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue+echarts繪制折線圖、柱狀圖和扇形圖教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
本篇文章主要介紹了詳解vue服務(wù)端渲染(SSR)初探，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
vue結(jié)合Axios+v-for列表循環(huán)實(shí)現(xiàn)網(wǎng)易健康頁(yè)面(實(shí)例代碼)
這篇文章主要介紹了vue結(jié)合Axios+v-for列表循環(huán)實(shí)現(xiàn)網(wǎng)易健康頁(yè)面,在項(xiàng)目下安裝axios，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
本篇文章給大家分享了vue2單元測(cè)試環(huán)境搭建的詳細(xì)步驟，對(duì)此有需要的朋友參考學(xué)習(xí)下。2018-05-05
vue-cli3環(huán)境變量與分環(huán)境打包的方法示例
這篇文章主要介紹了vue-cli3環(huán)境變量與分環(huán)境打包的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02