少学习多摸鱼

day95-vue版本的求和问题

求和案例-vue版本

简单的点击操作求和加减操作

 <template>
   <div>
     <h1>当前求和为{{sum}}</h1>
     <select v-model="n">
       <option :value="1">1</option>
       <option :value="2">2</option>
       <option :value="3">3</option>
     </select>
     <button @click="increment">+</button>
     <button @click="decrement">-</button>
     <button @click="incrementOdd">当前求和为奇数再加</button>
     <button @click="incrementWait">等一等再加</button>
   </div>
 </template><script>
 export default {
   name: "CountCom",
   data() {
     return {
       n: 1,//用户选择的数字
       sum: 0//当前的sun值
     }
   },
   methods: {
     increment() {
       this.sum +=this.n
     },
     decrement(){
       this.sum -= this.n
     },
     incrementOdd(){
       if (this.sum%2){
         this.sum +=this.n
       }
     },
     incrementWait(){
       setTimeout(()=>{
         this.sum +=this.n
       },500)
     }
   }
 }
 </script>

 

 
posted @ 2023-03-16 12:03  北海之上  阅读(39)  评论(0)    收藏  举报
/* 粒子吸附*/