vue学习05 小小计数器

vue学习05 小小计数器

目录

用前面学过的v-on指令来完成一个计数器的功能：

按加键数字加，按减键数字减，像添加商品数量一样加减

  • 创建Vue示例时：需要创建el挂载点，data数据，methods方法。
  • v-on指令的作用是绑定事件，简写为@
  • 方法中通过this关键字来获取data中的数据
  • v-text指令的作用是：设置元素的的文本值，简写为{

练习代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h5>我是一个计数器哦！</h5>
    <!-- 2.html的结构 -->
    <div id="app">
        <!-- 计数器功能区 -->
        <div class="input-num">
            <button @click="sub">-</button>
            <span>{{ num }}</span>
            <button @click="add">+</button>
        </div>
    </div>
    <!-- 1.开发环境版本 -->
    <script src="js/vue.js"> </script>
    <!-- 3.创建vue实例 -->
    <script>
        var app = new Vue({
            el:"#app",
            data: {
               num:1
            },
            methods:{
               add:function(){
                // console.log('add');
                if(this.num<10){
                    this.num++;
                }else{
                    alert("最大了！别点了。。。")
                }
                
               },
               sub:function(){
                //console.log('sub');
                if(this.num>0){
                    this.num--;
                }else{
                    alert("最小了！别点了。。。")
                }
               }
            },   
        })
    </script>
</body>
</html>

运行效果为：

image-20200925075225531

posted @ 2020-09-25 07:56  侠客小飞  阅读(143)  评论(0)  编辑  收藏  举报