Vue.js實(shí)現(xiàn)簡單計(jì)時(shí)器應(yīng)用
更新時(shí)間：2022年09月14日 10:53:08 作者：孤勇者Y
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)簡單計(jì)時(shí)器應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue.js實(shí)現(xiàn)簡單計(jì)時(shí)器應(yīng)用的具體代碼，供大家參考，具體內(nèi)容如下
一、計(jì)時(shí)器
1、在data中定義數(shù)據(jù)：比如num用來計(jì)時(shí)；
2、menthods中的添加兩個(gè)方法：比如add(作加運(yùn)算），sub(做間的運(yùn)算）；
3、使用一個(gè)V-text將num設(shè)置為給<span>標(biāo)簽；
4、使用一個(gè)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ì)時(shí)器</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ì)時(shí)器
- 使用vue實(shí)現(xiàn)計(jì)時(shí)器功能
- vue.js實(shí)現(xiàn)簡單計(jì)時(shí)器功能
- vue實(shí)現(xiàn)簡易計(jì)時(shí)器組件
- vue計(jì)時(shí)器的實(shí)現(xiàn)方法
- Vue計(jì)時(shí)器的用法詳解
- 解決vue組件銷毀之后計(jì)時(shí)器繼續(xù)執(zhí)行的問題
- 在Vue環(huán)境下利用worker運(yùn)行interval計(jì)時(shí)器的步驟
- Vue 使用計(jì)時(shí)器實(shí)現(xiàn)跑馬燈效果的實(shí)例代碼
- vue 計(jì)時(shí)器組件的實(shí)現(xiàn)代碼
相關(guān)文章
vue中前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實(shí)例講解
今天小編就為大家分享一篇vue中前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
使用vue的時(shí)候,想要獲得一個(gè)指定的元素的高度時(shí),下面這篇文章主要給大家介紹了關(guān)于如何在Vue中獲取DOM元素的實(shí)際寬高的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務(wù)、清除復(fù)制粘貼樣式等)
這篇文章主要介紹了Vue項(xiàng)目中使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務(wù)、清除復(fù)制粘貼樣式等)的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單的發(fā)表評論功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue使用router-view調(diào)用頁面方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue通過moment插件實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天
這篇文章主要介紹了Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
vue2.0 better-scroll 實(shí)現(xiàn)移動端滑動的示例代碼
本篇文章主要介紹了vue2.0 better-scroll 實(shí)現(xiàn)移動端滑動的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2018-01-01
這篇文章主要給大家介紹了關(guān)于vue滾動條滾動到頂部或者底部的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue踩坑之backgroundImage路徑問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了使用vite兼容低端瀏覽器配置方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05