三.vue简易计数器

关注

原创最新推荐文章于 2025-11-09 22:10:52 发布 146 阅读 AI 写同款· GEO 优化 ›

VueJS简明教程(一)之基本使用方法简介：这是一篇超级简单的入门文章如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。 Vue.js的官方中文教程其实也是一个不错的教程，不过相比于一次性把所有概念掌握，我更倾向于先会用，之后再在实际应用中把未涉及到的知识点逐步补全。就像开车，不是非要知道发动机的工作原理才能上路... 阅读详情

/*注意: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>

收录于