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)容如下
過(guò)程注意事項(xiàng)
- 創(chuàng)建vue實(shí)例時(shí)：el（掛載點(diǎn)）data（數(shù)據(jù)）methods（方法）。
- v-on指令得作用是綁定事件，簡(jiǎn)寫(xiě)為@。
- 方法中通過(guò)this關(guān)鍵字獲取data中的數(shù)據(jù)。
- v-text指令的作用是：設(shè)置元素的文本值，簡(jiǎn)寫(xiě)為{{}}。
- 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>
<!-- 開(kāi)發(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)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue清除定時(shí)器setInterval優(yōu)化方案分享
這篇文章主要介紹了Vue清除定時(shí)器setInterval優(yōu)化方案分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Element?plus中el-input框回車(chē)觸發(fā)頁(yè)面刷新問(wèn)題以及解決辦法
在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個(gè)頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車(chē)觸發(fā)頁(yè)面刷新問(wèn)題以及解決辦法,需要的朋友可以參考下2024-03-03
vue富文本框（插入文本、圖片、視頻）的使用及問(wèn)題小結(jié)
這篇文章主要介紹了vue富文本框（插入文本、圖片、視頻）的使用及問(wèn)題小結(jié),需要的朋友可以參考下2018-08-08
這篇文章主要為大家整理了Vue3的8種和Vue2的12種組件通信的使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，值得收藏2023-04-04
vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作
這篇文章主要介紹了vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
基于Vue3定制復(fù)雜組件滾動(dòng)條的實(shí)現(xiàn)
這篇文章主要介紹了如何利用vue3定制復(fù)雜組件的滾動(dòng)條，文中通過(guò)示例代碼講解詳細(xì)，需要的朋友們下面就跟隨小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue框架很核心的功能就是雙向的數(shù)據(jù)綁定。下面這篇文章主要給大家介紹了關(guān)于Vue.js中數(shù)據(jù)綁定的語(yǔ)法教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
當(dāng)我們談?wù)揤ue的組件擴(kuò)展時(shí),經(jīng)常會(huì)遇到mixin和extends這兩個(gè)關(guān)鍵詞,它們提供了一種有效的方式來(lái)共享和重用組件邏輯,本文將深入探討Vue中mixin和extends的使用方法,并詳細(xì)探討它們的覆蓋邏輯,以便你在實(shí)際項(xiàng)目中能夠更好地應(yīng)用它們2023-08-08
Vue全局事件總線(xiàn)和訂閱與發(fā)布使用案例分析講解
在?vue?里我們可以通過(guò)全局事件總線(xiàn)來(lái)實(shí)現(xiàn)任意組件之間通信，它的原理是給?Vue?的原型對(duì)象上面添加一個(gè)屬性。這樣的話(huà)我所有組件的都可以訪(fǎng)問(wèn)到這個(gè)屬性，然后可以通過(guò)這個(gè)屬性來(lái)訪(fǎng)問(wèn)其他組件給這個(gè)屬性上面綁定的一些方法，從而去傳遞數(shù)據(jù)2022-08-08
本文主要給大家介紹基于vue的分頁(yè)原生寫(xiě)法，代碼分為html部分和js部分，簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03