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