一瓶可乐售价3元, 使用VUE3 计算属性实现点击按钮 增加一瓶可乐的总数量 同时计算出可乐总价钱。
时间: 2023-07-18 17:11:51 浏览: 50
好的,使用 Vue3,可以这样实现:
首先,在你的 HTML 中需要有一个按钮来触发增加可乐数量的操作,以及一个展示总数量和总价钱的区域。代码如下:
```
<button @click="addCola">增加可乐</button>
<p>可乐总数量:{{ colaCount }}</p>
<p>可乐总价钱:{{ colaPrice }}</p>
```
然后,在你的 Vue 实例中,使用 `ref` 来定义可乐数量的变量,并使用 `computed` 来计算可乐总价钱。代码如下:
```
<template>
<div>
<button @click="addCola">增加可乐</button>
<p>可乐总数量:{{ colaCount }}</p>
<p>可乐总价钱:{{ colaPrice }}</p>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const colaCount = ref(0);
const colaPrice = computed(() => {
return colaCount.value * 3;
});
const addCola = () => {
colaCount.value++;
};
return {
colaCount,
colaPrice,
addCola,
};
},
};
</script>
```
这样,当你点击按钮时,`addCola` 方法会被触发,将 `colaCount` 增加 1。然后,`colaPrice` 计算属性会根据 `colaCount` 的值自动计算出可乐总价钱,更新到页面上。注意,Vue3 不再需要 `data` 选项,而是使用 `setup` 函数来定义响应式数据和方法。并且,使用 `ref` 来定义变量,而不再是普通的对象属性。