vue實現(xiàn)計數(shù)器簡單制作
更新時間：2021年06月24日 15:33:51 作者：A_Lzexin
這篇文章主要為大家詳細介紹了vue實現(xiàn)計數(shù)器簡單制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)計數(shù)器簡單實現(xiàn)代碼，供大家參考，具體內容如下
過程注意事項
- 創(chuàng)建vue實例時：el（掛載點）data（數(shù)據(jù)）methods（方法）。
- v-on指令得作用是綁定事件，簡寫為@。
- 方法中通過this關鍵字獲取data中的數(shù)據(jù)。
- v-text指令的作用是：設置元素的文本值，簡寫為{{}}。
- v-html指令的作用是：設置元素的innerHTML。
實際代碼與截圖
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>計數(shù)器</title>
</head>
<body>
<div id="app">
<!--計數(shù)器功能區(qū)域-->
<div class="input-num">
<button @click="sub">
-
</button>
<span>{{num}}</span>
<button @click="add">
+
</button>
</div>
</div>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//vue實例
var app = new Vue({
el:"#app",
data: {
num:1
},
methods: {
add:function(){
//console.log('add')
if(this.num<10){
this.num++;
}else{
alert('別點啦，最大了！');
}
},
sub:function(){
//console.log('sub')
if(this.num>0){
this.num--;
}else{
alert('別點啦，最小了！');
}
}
},
})
</script>
</body>
</html>
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue3中依賴注入provide、inject的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
自定義指令，其實就是在vue提供的鉤子中寫代碼，這篇文章將從源碼的角度，帶大家深入了解一下Vue2種自定義指令的實現(xiàn)與使用，需要的可以參考一下2023-05-05
Vue3中實現(xiàn)二維碼生成需要使用第三方庫來處理生成二維碼的邏輯,常用的庫有?qrcode和?vue-qrcode,本文主要介紹了Vue3中使用qrcode庫實現(xiàn)二維碼生成,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了vue-router傳參的四種方式超詳細,有router-link路由導航方式傳參，調用$router.push實現(xiàn)路由傳參，通過路由屬性name匹配路由，再根據(jù)params傳遞參數(shù)等等，結合示例代碼講解的非常詳細，需要的朋友可以參考下2022-12-12
這篇文章我們將一起學習vue.js實現(xiàn)綁定class和style樣式，感興趣的小伙伴們可以參考一下2016-12-12
Vue系列：通過vue-router如何傳遞參數(shù)示例
本篇文章主要介紹了Vue系列：通過vue-router如何傳遞參數(shù)示例，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
在這篇文章中,我們將學習一下 Vue3 的全局組件注冊是如何實現(xiàn)的,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-12-12
為了像微信一樣方便地加載更多歷史消息，這篇文章將為大家介紹我們如何使用vant組件來實現(xiàn)下拉加載功能，感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06
關于Uncaught(in?promise)TypeError:?list?is?not?iterable報錯
這篇文章主要給大家介紹了關于Uncaught(in?promise)TypeError:?list?is?not?iterable報錯的解決方法,文中通過示例代碼介紹的非常詳細,對大家學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播效果
這篇文章主要介紹了Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07