vue_本地应用

本地应用

v-text指令

 

v-html指令

v-on基础

为元素绑定事件
回忆：常用事件名-onmouseover，inmouseup

计数器

 

 
 
 
 
我的计数器-仿写
<body>
    <!-- html结构 -->
    <div id='app'>
        <!-- button功能区 -->
        <div>
            <button @click='sub'>
                -
            </button>
            <span>{{ num }}</span>
            <button @click='add'>
                +
            </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 创建Vue实例
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                add:function(){
                    console.log('add');
                    if(this.num<3){
                        this.num+=1;
                    }else{
                        alert('no more goods.');
                    }
                },
                sub:function(){
                    console.log('sub');
                    if(this.num>0){
                        this.num-=1;
                    }else{
                        alert('the least now.')
                    }
                }
            }
        })
    </script>
</body>

 

 
posted @ 2021-12-06 19:12  tbbb1  阅读(52)  评论(0)    收藏  举报