Vue實(shí)現(xiàn)計(jì)數(shù)器案例
更新時(shí)間：2021年06月25日 12:06:44 作者：zmt0104
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)數(shù)器案例的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)計(jì)數(shù)器展示的具體代碼，供大家參考，具體內(nèi)容如下
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計(jì)數(shù)器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
#app{
text-align: center;
margin: 0 auto;
line-height: 500px;
}
#app input{
width: 50px;
height: 40px;
font-size: 20px;
border-radius: 5px;
outline: none;
/* 自定義邊框 */
border: 1px solid transparent;
background-color: blue;
line-height: 30px;
color: white;
}
#app span{
padding: 20px 20px;
border: 1px;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="-" @click="sub"/>
<span>{{num}}</span>
<input type="button" value="+" @click="add"/>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods:{
add: function(){
if(this.num<10){
this.num++;
}else{
alert("達(dá)到最大啦!");
}
},
sub: function(){
if(this.num>0){
this.num--;
}else{
alert("已經(jīng)沒有了!");
}
}
}
})
</script>
</body>
</html>
- data中寫需要用到的數(shù)據(jù)：num
- -methods中添加兩個(gè)方法：加(add)、減(sub)
- 使用v-text或者差值表達(dá)式將num設(shè)置給span標(biāo)簽
- 使用v-on：(簡寫，@)將add、sub分別綁定給+、-按鈕
- 累加的邏輯：小于10累加，否則提示
- 遞減的邏輯：大于0遞漸，否則提示
- 方法中通過this關(guān)鍵字獲取data中的數(shù)據(jù)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue單文件組件開發(fā)實(shí)現(xiàn)過程詳解
這篇文章主要介紹了Vue單文件組件開發(fā)實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
使用Element+vue實(shí)現(xiàn)開始與結(jié)束時(shí)間限制
這篇文章主要為大家詳細(xì)介紹了使用Element+vue實(shí)現(xiàn)開始與結(jié)束時(shí)間限制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue 通過下拉框組件學(xué)習(xí)vue中的父子通訊
這篇文章主要介紹了vue 通過下拉框組件學(xué)習(xí)vue中的父子通訊的相關(guān)知識,文中涉及到了父組件，子組件的實(shí)現(xiàn)代碼，需要的朋友可以參考下2017-12-12
vue?watch報(bào)錯:Error?in?callback?for?watcher?"xxx&qu
這篇文章主要給大家介紹了關(guān)于vue?watch報(bào)錯:Error?in?callback?for?watcher?“xxx“:“TypeError:Cannot?read?properties?of?undefined的解決方法,需要的朋友可以參考下2023-03-03
在同一個(gè)Vue項(xiàng)目中的不同vue和HTML頁面之間進(jìn)行跳轉(zhuǎn)方式
這篇文章主要介紹了在同一個(gè)Vue項(xiàng)目中的不同vue和HTML頁面之間進(jìn)行跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vuex是一個(gè)專門為vue.js設(shè)計(jì)的狀態(tài)管理模式，并且也可以使用devtools進(jìn)行調(diào)試。2017-05-05
解決Vue的項(xiàng)目使用Element ui 走馬燈無法實(shí)現(xiàn)的問題
這篇文章主要介紹了解決Vue的項(xiàng)目使用Element ui 走馬燈無法實(shí)現(xiàn)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
平時(shí)在獲取真實(shí)DOM的時(shí)候獲取不到最新的DOM元素，使用$nextTick就可以，那為什么$nextTick就可以獲取到最新的DOM元素呢，本文就來帶著這兩個(gè)問題來解析一下nextTick的原理2023-05-05
這篇文章主要為大家詳細(xì)介紹了基于vue的fullpage.js單頁滾動插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Vant是一個(gè)專為移動端設(shè)計(jì)的輕量級組件庫,自2017年開源以來,提供了Vue2、Vue3及多平臺版本支持,安裝Vant時(shí)需要注意版本兼容問題,Vue3項(xiàng)目應(yīng)安裝最新版Vant3,而Vue2項(xiàng)目則需安裝Vant2,安裝錯誤時(shí),需卸載后重新安裝正確版本2024-10-10