用vue实现选你爱我求和

在Vue.js中，实现"选你爱我"的游戏并计算用户选择项的总和，可以创建一个简单的组件结构。这个组件通常包含一个数组表示选项，每个选项都有一个值和一个默认状态（未选择）。我们可以使用v-model绑定让用户选择，并通过计算属性`totalSum`实时计算总和。

首先，定义一个Vue组件：

<template>
  <div>
    <h2>选你爱我</h2>
    <ul v-for="(item, index) in options" :key="index">
      <li>
        <input type="radio" :value="item.value" v-model="selectedValues" :id="`option-${index}`" />
        <label :for="`option-${index}`">{{ item.label }}</label>
        <span>{{ item.value }}</span>
      </li>
    </ul>
    <p>Total sum: {{ totalSum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项1', value: 1 },
        { label: '选项2', value: 2 },
        // ... 添加更多选项
      ],
      selectedValues: [], // 用户选择的值，初始为空数组
    };
  },
  computed: {
    totalSum() {
      return this.selectedValues.reduce((sum, value) => sum + value, 0);
    }
  }
};
</script>

在这个组件中，我们遍历`options`数组，为每个选项创建一个 radio 标签，`v-model`用于双向数据绑定用户的选择。`totalSum`是一个计算属性，使用`reduce`函数将所有已选择的值相加。