Vue.js實現簡單計時器應用
更新時間：2022年09月14日 10:53:08 作者：孤勇者Y
這篇文章主要為大家詳細介紹了Vue.js實現簡單計時器應用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue.js實現簡單計時器應用的具體代碼，供大家參考，具體內容如下
一、計時器
1、在data中定義數據：比如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結構-->
? ? ? <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>最終結果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue實現移動端懸浮窗效果，vuejs實現div拖拽移動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue中的非父子間的通訊問題簡單的實例代碼,需要的朋友可以參考下2017-07-07
這篇文章主要為大家詳細介紹了Vue中引用echarts的超詳細教程,文中的示例代碼簡潔易懂,對我們熟練使用vue有一定的幫助,需要的小伙伴可以參考一下2023-09-09
vue使用video插件vue-video-player的示例
這篇文章主要介紹了vue使用video插件vue-video-player的示例，幫助大家更好的理解和使用vue插件，感興趣的朋友可以了解下2020-10-10
Vue 2閱讀理解之initRender與callHook組件詳解
這篇文章主要為大家介紹了Vue 2閱讀理解之initRender與callHook組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了關于element中el-cascader的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue/cli3版本打包如何去掉soucemap文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Driver.js是一個功能強大且高度可定制的基于原生JavaScript開發(fā)的新用戶引導庫，本文主要介紹了Vue使用driver.js做引導頁，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章給大家介紹了vue中本地靜態(tài)圖片路徑寫法及Vue.js中引用圖片路徑的方式，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了vue實現裁切圖片同時實現放大、縮小、旋轉功能，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03