Vue中,监听数据变化,单击“数量+1”按钮后,数量和总价变化。同时,控制栏也会出现单机按钮前后的值
时间: 2024-10-08 17:23:23 浏览: 14
在Vue.js中,你可以通过`v-model`指令以及事件绑定来实现这个功能。首先,你需要创建一个组件,并定义一个数据属性如`quantity`(数量)和`totalPrice`(总价),然后监听`quantity`的变化。
HTML部分可以这样设计:
```html
<template>
<div>
<input type="number" v-model.number="quantity" :min="0" @change="updateTotal"> <!-- 监听输入框数值变化 -->
<button @click="increaseQuantity">数量+1</button>
<p>当前数量: {{ quantity }}</p>
<p>总价: {{ totalPrice }}</p>
<!-- 控制栏显示前后值 -->
<p>点击前数量: {{ oldQuantity }}</p>
<p>点击后总价: {{ newTotalPrice }}</p>
</div>
</template>
```
JavaScript部分(Vue实例):
```javascript
<script>
export default {
data() {
return {
quantity: 0,
totalPrice: 0,
// 当量更新时,存储旧值
oldQuantity: null,
// 更新后的总价(假设单价已设定)
newTotalPrice: null,
};
},
methods: {
increaseQuantity() {
this.quantity++;
// 更新总价并保存旧值和新总价
this.oldQuantity = this.quantity;
this.newTotalPrice = this.quantity * yourProductPrice; // 假设yourProductPrice是单价
},
updateTotal(e) {
this.totalPrice = e.target.value * yourProductPrice;
},
},
};
</script>
```
在这个例子中,当你点击“数量+1”按钮或改变输入框的数值时,`increaseQuantity`和`updateTotal`方法会被调用,相应地更新数量、总价,并在控制栏展示操作前后的值。
阅读全文