VUE实例课程---40、counter实例
一、总结
一句话总结：
counter实例就是用vue组件的方式做的计数小实例，把数据放在组件的data中，computed修饰数据，methods中放操作数据的方法
<template>
<div>
<div>click {{count}} times, count is {{evenOrOdd}}</div>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">increment if odd</button>
<button @click="incrementAsync">increment async</button>
</div>
</template>
<script>
export default {
name: "Counter",
data:function () {
return {
count:1
};
},
computed:{
evenOrOdd:function () {
return this.count%2===0?'偶数':'奇数';
}
},
methods:{
increment:function () {
// console.log(this);
this.count++;
},
decrement:function () {
this.count--;
},
incrementIfOdd:function () {
if(this.count%2===1){
this.count++;
}
},
incrementAsync:function () {
setTimeout(()=>{
this.count++;
},1000);
}
}
}
</script>
<style scoped>
button{
margin-right: 10px;
}
</style>
二、counter实例
博客对应课程的视频位置：
Counter.vue
1 <template> 2 <div> 3 <div>click {{count}} times, count is {{evenOrOdd}}</div> 4 <button @click="increment">+</button> 5 <button @click="decrement">-</button> 6 <button @click="incrementIfOdd">increment if odd</button> 7 <button @click="incrementAsync">increment async</button> 8 </div> 9 </template> 10 11 <script> 12 export default { 13 name: "Counter", 14 data:function () { 15 return { 16 count:1 17 }; 18 }, 19 computed:{ 20 evenOrOdd:function () { 21 return this.count%2===0?'偶数':'奇数'; 22 } 23 }, 24 methods:{ 25 increment:function () { 26 // console.log(this); 27 this.count++; 28 }, 29 decrement:function () { 30 this.count--; 31 }, 32 incrementIfOdd:function () { 33 if(this.count%2===1){ 34 this.count++; 35 } 36 }, 37 incrementAsync:function () { 38 setTimeout(()=>{ 39 this.count++; 40 },1000); 41 } 42 } 43 } 44 </script> 45 46 <style scoped> 47 button{ 48 margin-right: 10px; 49 } 50 </style>
