VUE本地应用计数器

最新推荐文章于 2022-09-22 17:14:12 发布

qq1297578010

最新推荐文章于 2022-09-22 17:14:12 发布

阅读量78

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq1297578010/article/details/124313195

版权

1.data中定义数据：比如num

2.methods中添加两个方法：比如add（递增）,sub(递减)

3.使用v-text将num设置给span标签

4.使用v-on将add，sub分别绑定给+，-按钮

5.累加的逻辑：小于10累加，否则提示

6.递减的逻辑：大于0递减，否则提示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #app {
        width: 480px;
        height: 100px;
        margin: 200px auto;
      }
      .input-num {
        margin-top: 20px;
        height: 100%;
        display: flex;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 4px black;
      }
      .input-num button {
        width: 150px;
        height: 100%;
        font-size: 40px;
        color: gray;
        cursor: pointer;
        border: none;
        outline: none;
      }
      .input-num span {
        height: 100%;
        font-size: 40px;
        flex: 1;
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 计数器 -->
      <div class="input-num">
        <button @click="sub">-</button>
        <span>{{num}}</span>
        <button @click="add">+</button>
      </div>
    </div>
  </body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script>
  // 创建Vue实例
  var app = new Vue({
    el: "#app",
    data: {
      num: 1
    },
    methods: {
      add: function() {
      if(this.num<10){
        this.num++;
      }else{
        alert('别点啦最大了');
      }
    },
    
      sub: function() {
        if(this.num>0){
      this.num--;
    }else{
      alert('别点啦最小啦')
    }
  }
  },
  });
</script>

重点：用到的指令

创建vue示例时：el（挂载点），data（数据），methods（方法）

v-on指令的作用是绑定事件，简写为@

方法中通过this关键字获取data中的数据

v-text指令的作用是：设置元素的文本值，简写为{{}}

v-html指令的作用是：设置元素的innerHTML