本篇內容主要講解“vue實現計數器功能實例”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“vue實現計數器功能實例”吧!
本文實例為大家分享了vue實現計數器簡單實現代碼,供大家參考,具體內容如下
創建vue實例時:el(掛載點)data(數據)methods(方法)。
v-on指令得作用是綁定事件,簡寫為@。
方法中通過this關鍵字獲取data中的數據。
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>計數器</title> </head> <body> <div id="app"> <!--計數器功能區域--> <div class="input-num"> <button @click="sub"> - </button> <span>{{num}}</span> <button @click="add"> + </button> </div> </div> <!-- 開發環境版本,包含了有幫助的命令行警告 --> <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實現計數器功能實例”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。