vue简单计数器的实现

最新推荐文章于 2024-08-02 17:01:38 发布

玖十予柒

最新推荐文章于 2024-08-02 17:01:38 发布

阅读量513

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44756004/article/details/126024331

版权

EL挂载点：
Vue实例作用范围： vue会管理el选项命中的元素及其内部的后代元素
Vue是否可以使用其他的选择器：可以使用其他的选择器，但是建议使用ID选择器，因为ID选择器唯一
Vue是否可以设置其他的dom元素：可以使用其他的双标签，但是不能使用html和body标签

在这里插入图片描述

Data数据对象：
Vue中用到的数据定义在data中
Data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

实现计数器的代码

<!DOCTYPE html>
<html>
    <head>
        <title>guxin</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
           <!-- 计数器功能区域 -->
           <div class="input-num">
            <button v-on:click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button v-on:click="add">
                +
            </button>
           </div>
        </div>
        <script>
            new Vue({
               el:"#app",
               data:{
                num:1
               },
               methods: {
                add:function(){
                    // alert("add");
                    if(this.num<=10){
                        this.num++;
                    }
                    else{
                        alert("do not click me ,it is largest");
                    }
                    
                },
                sub:function(){
                    // alert("subb");
                    if(this.num>0){
                        this.num--;
                    }
                    else{
                        alert("do not click me ,it is smallest");
                    }
                }
               },
            })
        </script>
    </body>
</html>