<template> <SeptSelect :data='data' v-model='model'></SeptSelect> </template> <script> export default { data() { return { data: [ { value: "beijing", label: "北京市", }, { value: "shanghai", label: "上海市", }, { value: "shenzhen", label: "深圳市", }, { value: "hangzhou", label: "杭州市", }, { value: "nanjing", label: "南京市", }, { value: "chongqing", label: "重庆市", } ], model: "beijing" } } } </script>写两个下拉选择器 数据data互不干扰

可以使用 Vue 组件来实现两个下拉选择器，每个下拉选择器使用不同的数据。具体代码如下：

<!-- HTML -->
<div id="app">
  <label for="select1">选择1：</label>
  <select v-model="selectedOption1" id="select1" name="select1">
    <option v-for="option in data1" :value="option.value">{{ option.label }}</option>
  </select>

  <label for="select2">选择2：</label>
  <select v-model="selectedOption2" id="select2" name="select2">
    <option v-for="option in data2" :value="option.value">{{ option.label }}</option>
  </select>
</div>

// JS
Vue.component("SeptSelect", {
  props: ["data", "value"],
  template: `
    <select :value="value" @input="$emit('input', $event.target.value)">
      <option v-for="option in data" :value="option.value">{{ option.label }}</option>
    </select>
  `
});

new Vue({
  el: "#app",
  data: {
    data1: [
      { value: "option1", label: "选项1" },
      { value: "option2", label: "选项2" },
      { value: "option3", label: "选项3" },
      { value: "option4", label: "选项4" }
    ],
    data2: [
      { value: "option5", label: "选项5" },
      { value: "option6", label: "选项6" },
      { value: "option7", label: "选项7" },
      { value: "option8", label: "选项8" }
    ],
    selectedOption1: "",
    selectedOption2: ""
  }
});

在上述代码中，我们使用了一个单独的 Vue 组件 `SeptSelect` 来实现下拉选择器。该组件接收两个参数：`data` 和 `value`，分别表示选项数据和选中的选项值。在组件中，我们使用 `v-for` 指令遍历选项数据，并使用 `:value` 绑定选项值，使用 `{{ option.label }}` 显示选项文本。在下拉选择器中，我们使用 `v-model` 指令将选中的选项值绑定到 `selectedOption1` 和 `selectedOption2` 这两个数据上。

在 Vue 实例中，我们定义了两个数据 `data1` 和 `data2`，分别表示两个下拉选择器的选项数据。在 `selectedOption1` 和 `selectedOption2` 中分别保存了选择的选项值，保证两个下拉选择器的数据互不干扰。