Vue.js實現(xiàn)簡單計時器應用
更新時間：2022年09月14日 10:53:08 作者：孤勇者Y
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)簡單計時器應用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue.js實現(xiàn)簡單計時器應用的具體代碼，供大家參考，具體內(nèi)容如下
一、計時器
1、在data中定義數(shù)據(jù)：比如num用來計時；
2、menthods中的添加兩個方法：比如add(作加運算），sub(做間的運算）；
3、使用一個V-text將num設置為給<span>標簽；
4、使用一個v-on將add和sub分別綁定給+和-按鈕。
5、累加的邏輯：小于30累加，否則提示；
6、遞減的邏輯：大于0遞減，否則提示。
源代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>計時器</title>
</head>
<body>
? ? <!--html結(jié)構(gòu)-->
? ? ? <div id="app">
? ? ? <div class="input-null">
? ? ? ? <button @click="sub">
? ? ? ? ? ? -
? ? ? ? </button>
? ? ? ? <span >{{num}}</span>
? ? ? ? <button @click="add">
? ? ? ? ? ? +
? ? ? ? </button>
? ? ? </div>
? ? ? </div>
? ? ? ? <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 ，引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
? ? ? ? var app = new Vue({
? ? ? ? ? ? el:'#app',
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? num:1
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? add: function( ){
? ? ? ? ? ? ? ? ? ? if(this.num<30){
? ? ? ? ? ? ? ? ? ? ? ? this.num++
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? alert("別點了，我受不了你，你好煩呀！")
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? sub: function(){
? ? ? ? ? ? ? ? ? ? if(this.num>0){
? ? ? ? ? ? ? ? ? ? ? ? this.num--
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? alert("別點了，你有完沒完，找打是不！")
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
</script>
</body>
</html>最終結(jié)果如下：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue中前進刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實例講解
今天小編就為大家分享一篇vue中前進刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
使用vue的時候,想要獲得一個指定的元素的高度時,下面這篇文章主要給大家介紹了關于如何在Vue中獲取DOM元素的實際寬高的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
Vue使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務、清除復制粘貼樣式等)
這篇文章主要介紹了Vue項目中使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務、清除復制粘貼樣式等)的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單的發(fā)表評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue使用router-view調(diào)用頁面方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue通過moment插件實現(xiàn)獲取當前月的第一天和最后一天
這篇文章主要介紹了Vue 結(jié)合插件moment 實現(xiàn)獲取當前月的第一天和最后一天,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼
本篇文章主要介紹了vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2018-01-01
這篇文章主要給大家介紹了關于vue滾動條滾動到頂部或者底部的相關資料,文中通過代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue踩坑之backgroundImage路徑問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了使用vite兼容低端瀏覽器配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05