假期vue学习笔记14 求和案例vue版本

标签：Count vue return 14 求和 sum export

 

<template>     <div>         <h1>当前求和为：{{sum}}</h1>         <select v-model.number="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:'Count',         data() {             return {                 n:1, //用户选择的数字                 sum:0 //当前的和             }         },         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>
<style>     button{         margin-left: 5px;     } </style>   <template>         <div >             <Count/>         </div> </template>
<script>
import Count from './components/Count.vue'
export default{     name:'App',     components:{         Count     },     data() {         return {                 }     }, } </script>

<style lang="css">       </style>

标签：Count,vue,return,14,求和,sum,export
From： https://www.cnblogs.com/hbro/p/18041259