zoukankan      html  css  js  c++  java
  • 12.2 VUE学习之-if判断,实践加减input里的值

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>vue</title>
        <link rel="stylesheet" href="">
        <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
        <!--<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>-->
        <script type="text/javascript" src="../js/vue.js"></script>
    
    </head>
    <body>
        <div id="vue">
            <div>
                <span v-if="num > 0" v-on:click="dec(num)">-</span>
                <input v-model="num" type="text">
                <span v-on:click="inc(num)">+</span>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: "#vue",
            methods:{
                dec:function(num){
                    if(app.num>0){
                        app.num=num-1;
                        console.log(app.num);
                    }
                },
                inc:function(num){
                    app.num=num+1;
                    console.log(app.num);
                }
            },
            data:{
                num:0,
            }
        });
    
    </script>
    </html>
    

    效果:

  • 相关阅读:
    新人入住博客,互相交流,互相进步
    DHCP技术
    一些额外技术
    OSPF技术
    一些常用的命令
    RSTP技术及原理
    BFD原理
    VRRP技术
    Super VLAN技术
    哈希表(HashMap)
  • 原文地址:https://www.cnblogs.com/haima/p/10228365.html
Copyright © 2011-2022 走看看