三.vue简易计数器

最新推荐文章于 2024-09-05 17:32:12 发布

奥D

最新推荐文章于 2024-09-05 17:32:12 发布

阅读量102

点赞数

分类专栏： vue 笔记文章标签： vue

本文链接：https://blog.csdn.net/iloadj/article/details/109638643

版权

笔记同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

vue

24 篇文章 0 订阅

订阅专栏

/*注意:data中数据一定要使用this指向*/
<style>
    #app{
        padding: 20px;
        background-color: pink;
    }
</style>
<body>
   
    <div id="app">
        <input type="button" value="-" @click = "sub">
        <span>{{n}}</span>
        <input type="button" value="+" @click = "add">
    </div>
    

</body>
<script type="text/javascript" src="../day6 vue/vue.js" ></script>
<script type="text/javascript">
    const vm=new Vue({
        el:"#app",
        data:{
            n:1
        },
        methods:{
            add(){
                // console.log("add");
                if (this.n>9) {
                    this.n = 10;
                    return
                }
                this.n++
            },
            sub(){
                if (this.n<1) {
                    this.n = 0;
                    return
                }
                // console.log("sub");
                this.n--
                console.log(this.n);
            }
        }
    })
</script>