Vue實現計數器案例
更新時間：2021年06月25日 12:06:44 作者：zmt0104
這篇文章主要為大家詳細介紹了Vue計數器案例的實現方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現計數器展示的具體代碼，供大家參考，具體內容如下
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計數器</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("達到最大啦!");
}
},
sub: function(){
if(this.num>0){
this.num--;
}else{
alert("已經沒有了!");
}
}
}
})
</script>
</body>
</html>
- data中寫需要用到的數據：num
- -methods中添加兩個方法：加(add)、減(sub)
- 使用v-text或者差值表達式將num設置給span標簽
- 使用v-on：(簡寫，@)將add、sub分別綁定給+、-按鈕
- 累加的邏輯：小于10累加，否則提示
- 遞減的邏輯：大于0遞漸，否則提示
- 方法中通過this關鍵字獲取data中的數據
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue3中配置文件vue.config.js不生效的解決辦法
這篇文章主要介紹了vue3中配置文件vue.config.js不生效的解決辦法,文中通過代碼示例講解的非常詳細,對大家解決問題有一定的幫助,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了解決vue內存溢出報錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue radio單選框,獲取當前項(每一項)的value值操作
這篇文章主要介紹了vue radio單選框,獲取當前項(每一項)的value值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
今天小編就為大家分享一篇使用淘寶鏡像cnpm安裝Vue.js的圖文教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-05-05
本文主要介紹了vue3實現問卷調查的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
element-ui中如何給el-table的某一行或某一列加樣式
本文主要介紹了element-ui中怎么給el-table的某一行或某一列加樣式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要介紹了詳解Element 指令clickoutside源碼分析，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了詳解Axios統一錯誤處理與后置，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇使用vue-router切換頁面時實現設置過渡動畫。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue中swiper?vue-awesome-swiper的使用方法及各種坑解決
這篇文章主要介紹了vue中swiper?vue-awesome-swiper的使用方法及各種坑解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01