Vue.js實(shí)現(xiàn)簡單計(jì)時器應(yīng)用
更新時間：2022年09月14日 10:53:08 作者：孤勇者Y
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)簡單計(jì)時器應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue.js實(shí)現(xiàn)簡單計(jì)時器應(yīng)用的具體代碼，供大家參考，具體內(nèi)容如下
一、計(jì)時器
1、在data中定義數(shù)據(jù)：比如num用來計(jì)時；
2、menthods中的添加兩個方法：比如add(作加運(yùn)算），sub(做間的運(yùn)算）；
3、使用一個V-text將num設(shè)置為給<span>標(biāo)簽；
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>計(jì)時器</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("別點(diǎn)了，我受不了你，你好煩呀！")
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? sub: function(){
? ? ? ? ? ? ? ? ? ? if(this.num>0){
? ? ? ? ? ? ? ? ? ? ? ? this.num--
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? alert("別點(diǎn)了，你有完沒完，找打是不！")
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
</script>
</body>
</html>最終結(jié)果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于Vue方法實(shí)現(xiàn)簡單計(jì)時器
- 使用vue實(shí)現(xiàn)計(jì)時器功能
- vue.js實(shí)現(xiàn)簡單計(jì)時器功能
- vue實(shí)現(xiàn)簡易計(jì)時器組件
- vue計(jì)時器的實(shí)現(xiàn)方法
- Vue計(jì)時器的用法詳解
- 解決vue組件銷毀之后計(jì)時器繼續(xù)執(zhí)行的問題
- 在Vue環(huán)境下利用worker運(yùn)行interval計(jì)時器的步驟
- Vue 使用計(jì)時器實(shí)現(xiàn)跑馬燈效果的實(shí)例代碼
- vue 計(jì)時器組件的實(shí)現(xiàn)代碼
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動端懸浮窗效果，vuejs實(shí)現(xiàn)div拖拽移動，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue中的非父子間的通訊問題簡單的實(shí)例代碼,需要的朋友可以參考下2017-07-07
這篇文章主要為大家詳細(xì)介紹了Vue中引用echarts的超詳細(xì)教程,文中的示例代碼簡潔易懂,對我們熟練使用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組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue/cli3版本打包如何去掉soucemap文件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Driver.js是一個功能強(qiáng)大且高度可定制的基于原生JavaScript開發(fā)的新用戶引導(dǎo)庫，本文主要介紹了Vue使用driver.js做引導(dǎo)頁，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章給大家介紹了vue中本地靜態(tài)圖片路徑寫法及Vue.js中引用圖片路徑的方式，需要的朋友參考下吧2018-03-03
vue實(shí)現(xiàn)裁切圖片同時實(shí)現(xiàn)放大、縮小、旋轉(zhuǎn)功能
這篇文章主要介紹了vue實(shí)現(xiàn)裁切圖片同時實(shí)現(xiàn)放大、縮小、旋轉(zhuǎn)功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03