vue3 下拉框联动compute

在 Vue3 中，我们可以通过监听下拉框的 `v-model` 值的变化来触发联动计算。具体实现步骤如下：

1. 在 `data` 中定义下拉框的选项数据和联动计算的结果数据。

data() {
  return {
    options1: ['A', 'B', 'C'],
    options2: {
      A: ['1', '2', '3'],
      B: ['4', '5', '6'],
      C: ['7', '8', '9']
    },
    result: ''
  }
}

2. 在模板中使用 `v-model` 绑定下拉框的值，并添加 `@change` 事件监听选项变化。

<template>
  <div>
    <select v-model="selected1" @change="computeResult">
      <option v-for="option in options1" :value="option">{{ option }}</option>
    </select>
    <select v-model="selected2" @change="computeResult">
      <option v-for="option in options2[selected1]" :value="option">{{ option }}</option>
    </select>
    <div>{{ result }}</div>
  </div>
</template>

3. 在 `methods` 中定义计算结果的方法，根据选中的下拉框的值进行计算。

methods: {
  computeResult() {
    this.result = this.selected1 + '-' + this.selected2
  }
}

这样，当第一个下拉框的选项变化时，第二个下拉框的选项会根据第一个下拉框的选中值动态更新，同时也会触发 `computeResult` 方法重新计算结果并更新到模板中。