vue实现有一个数字的数组,点击对应数组前的input按钮求对应点击数字的和
时间: 2023-12-03 09:41:57 浏览: 77
可以通过以下步骤实现:
1. 在 Vue 的 data 中定义一个数组,存放数字数据,例如 `numbers: [1, 2, 3, 4, 5]`。
2. 在模板中使用 `v-for` 循环渲染每个数字,同时给每个数字对应的 input 添加一个点击事件。
```html
<div v-for="(number, index) in numbers" :key="index">
<input type="button" @click="handleClick(index)" value="选择">
{{ number }}
</div>
```
3. 在 methods 中定义 `handleClick` 方法,接收点击的数字下标作为参数,将该数字加入到一个计算总和的变量中。例如:
```javascript
methods: {
handleClick(index) {
this.sum += this.numbers[index];
}
}
```
4. 在 data 中定义一个变量 `sum`,初始值为 0,用于存放计算后的总和。
```javascript
data() {
return {
numbers: [1, 2, 3, 4, 5],
sum: 0
};
}
```
5. 在模板中显示计算后的总和。
```html
<div>
总和:{{ sum }}
</div>
```
阅读全文