用组合式来监听数据的变化: 单击“数量+1”按钮后,数量和总价的数字会发生变化,同时在控制栏也会出现单击按钮前后的值。
时间: 2024-10-11 21:02:57 浏览: 10
在Vue中,要实现这个功能,我们可以使用`v-model`指令结合`计算属性`(Computed Properties)来监听数据的变化,并且利用`methods`定义处理按钮点击事件。以下是一个简单的示例:
```html
<template>
<div>
<input type="number" v-model.number="quantity" :min="0" @change="$emit('update:quantity', $event.target.value)">
<button @click="increaseQuantity">数量+1</button>
<p>当前数量: {{ quantity }}</p>
<p>总价: {{ totalPrice }}</p>
<div class="control-bar">
<span>点击前数量: {{ prevQuantity }}</span>
<span>点击前总价: {{ prevTotalPrice }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
quantity: 0,
totalPrice: 0, // 假设单价固定为10
prevQuantity: null,
prevTotalPrice: null,
};
},
methods: {
increaseQuantity() {
this.quantity += 1;
// 记录点击前的数据
if (this.prevQuantity === null) {
this.prevQuantity = this.quantity;
this.prevTotalPrice = this.totalPrice;
} else {
this.prevTotalPrice = this.prevQuantity * 10; // 假设单价为10
}
// 更新总价并触发视图更新
this.totalPrice = this.quantity * 10;
}
},
watch: {
quantity(newVal, oldVal) {
// 当数量变化时,在控制栏更新点击前后的值
if (newVal !== oldVal && this.prevQuantity !== null) {
this.$emit('update:prevQuantity', this.prevQuantity);
this.$emit('update:prevTotalPrice', this.prevTotalPrice);
}
}
}
};
</script>
```
在这个例子中:
- `v-model.number`确保输入框中的数值类型为整数。
- `@change`事件监听输入框的变化,并通过`$emit`触发自定义事件`update:quantity`,通知父组件或模板中的其他部分更新数量。
- `increaseQuantity`方法处理按钮点击,增加数量并记录前一状态。
- `watch`对象监听`quantity`的变化,当有新的值且之前有记录时,会在控制栏显示前一状态。
阅读全文