vue實(shí)現(xiàn)計(jì)數(shù)器簡(jiǎn)單制作
本文實(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-07Element?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-03vue富文本框(插入文本、圖片、視頻)的使用及問(wèn)題小結(jié)
這篇文章主要介紹了vue富文本框(插入文本、圖片、視頻)的使用及問(wèn)題小結(jié),需要的朋友可以參考下2018-08-08vue打包通過(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-04Vue全局事件總線(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