2020-10-29 V指令应用-计数器（3）

---

一、css部分

既然是计数器，就要满足三个功能：

• 加法（add）
• 减法（sub）
• 清零（zero）

核心思路就是为我们的计数器分别绑定事件，然后在el命中的区域编写数据和方法。
代码如下（示例）：

css部分

<style>
  #container{
    background-color:pink;
    display: flex;
    width: 300px;
    height: 50px;
    margin:0 auto;
  }
  .left,.right{
    flex:1;
    background-color: blue;
    text-align:center;
    line-height: 50px;
  }
  .middle{
    flex:1;
    background-color: aqua;
    text-align:center;
    line-height: 50px;
  }
  .right{
  flex:1;
  background-color: red;
  }
</style>

js部分

  new Vue({
    el:"#container",
    data:{
      num:1,
    },
    methods:{
      add:function(){
        this.num++;
      },
      sub:function(){
        this.num--;
      },
      zero:function(){
        this.num = 0;
      }
    }
  })
</script>

效果图