写一个count组件:
<template>
<div>
<h1>当前求和为{{ sum }}</h1>
<select v-model="number">
<option :value="1">1</option>
<option :value="2">2</option>
<option :value="3">3</option>
</select>
<button @click="add">+</button>
<button @click="reduce">-</button>
<button @click="odd_add">当前求和为奇数再加</button>
<button @click="wait">等3s再显示数据</button>
</div>
</template>
<script>
export default {
name: "Count",
data() {
return {
number: 1, //用户选择的数字
sum: 0, //当前的和
};
},
methods: {
add() {
this.sum += this.number; //让number+1
console.log(this.number);
},
reduce() {
this.sum -= this.number; //让number-1
},
odd_add() {
if (this.sum % 2) {
this.sum += this.number;
}
},
wait() {
setTimeout(() => {
this.sum += this.number; //让number+1
}, 3000);
},
},
};
</script>
<style lang="css" scoped>
button {
margin-left: 5px;
}
</style>
app.vue里引用这个组件:
<template>
<div>
<Count/>
</div>
</template>
<script>
import Count from './components/Count'
export default {
name:'App',
components: {Count},
}
</script>
知识点:
这里有一个小细节,通过select 选择过后里边的number数字就会变成字符型,导致出现点击2+1变成21而不是3,直接会拼接字符串。
这里可以采用 两种方式来解决:
v-bind的方式 <option :value="1">1</option>
v-model.number的方式把收集到的东西强转为number类型
<select v-model.number="number">