欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)計(jì)數(shù)器簡(jiǎn)單制作

 更新時(shí)間:2021年06月24日 15:33:51   作者:A_Lzexin  
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)計(jì)數(shù)器簡(jiǎn)單制作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)計(jì)數(shù)器簡(jiǎn)單實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下

過(guò)程注意事項(xiàng)

  • 創(chuàng)建vue實(shí)例時(shí):el(掛載點(diǎn))data(數(shù)據(jù))methods(方法)。
  • v-on指令得作用是綁定事件,簡(jiǎn)寫(xiě)為@。
  • 方法中通過(guò)this關(guān)鍵字獲取data中的數(shù)據(jù)。
  • v-text指令的作用是:設(shè)置元素的文本值,簡(jiǎn)寫(xiě)為{{}}。
  • v-html指令的作用是:設(shè)置元素的innerHTML。

實(shí)際代碼與截圖

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>計(jì)數(shù)器</title>
</head>
<body>
    <div id="app">
        <!--計(jì)數(shù)器功能區(qū)域-->
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
        <!-- 開(kāi)發(fā)環(huán)境版本,包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //vue實(shí)例
    var app = new Vue({
        el:"#app",
       data: {
            num:1
       },
       methods: {
           add:function(){
               //console.log('add')
               if(this.num<10){
                this.num++; 
               }else{
                alert('別點(diǎn)啦,最大了!');
               }
           },
           sub:function(){
               //console.log('sub')
               if(this.num>0){
                this.num--; 
               }else{
                alert('別點(diǎn)啦,最小了!');
               }
           }
       },
    })
</script>
</body>
</html>

關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue清除定時(shí)器setInterval優(yōu)化方案分享

    Vue清除定時(shí)器setInterval優(yōu)化方案分享

    這篇文章主要介紹了Vue清除定時(shí)器setInterval優(yōu)化方案分享,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • Element?plus中el-input框回車(chē)觸發(fā)頁(yè)面刷新問(wèn)題以及解決辦法

    Element?plus中el-input框回車(chē)觸發(fā)頁(yè)面刷新問(wèn)題以及解決辦法

    在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個(gè)頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車(chē)觸發(fā)頁(yè)面刷新問(wèn)題以及解決辦法,需要的朋友可以參考下
    2024-03-03
  • vue富文本框(插入文本、圖片、視頻)的使用及問(wèn)題小結(jié)

    vue富文本框(插入文本、圖片、視頻)的使用及問(wèn)題小結(jié)

    這篇文章主要介紹了vue富文本框(插入文本、圖片、視頻)的使用及問(wèn)題小結(jié),需要的朋友可以參考下
    2018-08-08
  • Vue2和Vue3中常用組件通信用法分享

    Vue2和Vue3中常用組件通信用法分享

    這篇文章主要為大家整理了Vue3的8種和Vue2的12種組件通信的使用方法,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Vue有一定的幫助,值得收藏
    2023-04-04
  • vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作

    vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作

    這篇文章主要介紹了vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • 基于Vue3定制復(fù)雜組件滾動(dòng)條的實(shí)現(xiàn)

    基于Vue3定制復(fù)雜組件滾動(dòng)條的實(shí)現(xiàn)

    這篇文章主要介紹了如何利用vue3定制復(fù)雜組件的滾動(dòng)條,文中通過(guò)示例代碼講解詳細(xì),需要的朋友們下面就跟隨小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • Vue.js中數(shù)據(jù)綁定的語(yǔ)法教程

    Vue.js中數(shù)據(jù)綁定的語(yǔ)法教程

    Vue框架很核心的功能就是雙向的數(shù)據(jù)綁定。下面這篇文章主要給大家介紹了關(guān)于Vue.js中數(shù)據(jù)綁定的語(yǔ)法教程,文中通過(guò)示例代碼介紹的非常詳細(xì),相信對(duì)大家具有一的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。
    2017-06-06
  • Vue中mixin和extends的使用方法詳解

    Vue中mixin和extends的使用方法詳解

    當(dāng)我們談?wù)揤ue的組件擴(kuò)展時(shí),經(jīng)常會(huì)遇到mixin和extends這兩個(gè)關(guān)鍵詞,它們提供了一種有效的方式來(lái)共享和重用組件邏輯,本文將深入探討Vue中mixin和extends的使用方法,并詳細(xì)探討它們的覆蓋邏輯,以便你在實(shí)際項(xiàng)目中能夠更好地應(yīng)用它們
    2023-08-08
  • Vue全局事件總線(xiàn)和訂閱與發(fā)布使用案例分析講解

    Vue全局事件總線(xiàn)和訂閱與發(fā)布使用案例分析講解

    在?vue?里我們可以通過(guò)全局事件總線(xiàn)來(lái)實(shí)現(xiàn)任意組件之間通信,它的原理是給?Vue?的原型對(duì)象上面添加一個(gè)屬性。這樣的話(huà)我所有組件的都可以訪(fǎng)問(wèn)到這個(gè)屬性,然后可以通過(guò)這個(gè)屬性來(lái)訪(fǎng)問(wèn)其他組件給這個(gè)屬性上面綁定的一些方法,從而去傳遞數(shù)據(jù)
    2022-08-08
  • 基于vue.js實(shí)現(xiàn)的分頁(yè)

    基于vue.js實(shí)現(xiàn)的分頁(yè)

    本文主要給大家介紹基于vue的分頁(yè)原生寫(xiě)法,代碼分為html部分和js部分,簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧
    2018-03-03

最新評(píng)論