vue第三课：简单点击器应用

简单需求：

1，最小为0 ，小于0则不能再点击减少，并显示提示

2，最大值为10，小于10则可以点击增加，超过10则不能再点击，并显示提示

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>v-html测试
  </title>
  <script src="vue.js"></script>
</head>
<body>
  <div id='app'>
    <button @click="sub">-</button>
    <span>{{num}}</span>
    <button @click="add">+</button>
  </div>
  <script>
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
    var app = new Vue({
      el:'#app',
      data:{
        num:0,
      },
      methods: {
        add:function(){
         if(this.num<10){
          this.num++;
         }else{
          alert('别点了，最大值了');
         }
        } ,
        sub:function(){
         if(this.num>0){
          this.num--;
         }else{
          alert('别点了，最小值了');
         }
        }      
      },

    })
  </script>
</body>
</html>

 

posted @ 2023-04-04 12:43  super_ip  阅读(16)  评论(0)  编辑  收藏  举报