Javascript 如何根据vue js选择的另一个选择选项更改选择选项

我想使用它，但在Vue版本中制作它时遇到了困难。我在Vuejs.org上读过Vue的纪录片，但这无助于我将此脚本迁移到Vue版本

结构HTML

<select id="type">
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>

项目1
项目2
项目3
--选择一个--

JS

$（文档）.ready（函数（）{
$（“#type”）.change（函数（）{
var val=$（this.val（）；
如果（val==“项目1”）{
$（“#size”）.html（“item1:test1item1:test2”）；
}否则如果（val==“项目2”）{
$（“#size”）.html（“item2:test 1item2:test 2”）；
}否则如果（val==“项目3”）{
$（“#size”）.html（“item3:test 1item3:test 2”）；
}
});
});

以下是一个示例：

JS

newvue({
el:“#应用程序”，
数据：（）=>({
selection1:null，
选项列表：“”
}),
方法：{
changeSelect2（）{
开关（此。选择1）{
案例“项目1”：
this.options列表='item1:test 1item1:test 2'
打破
案例“项目2”：
this.options列表='item2:test 1item2:test 2'
打破
案例“项目3”：
this.options列表='item3:test 1item3:test 2'
打破
}
}
}
})

HTML

<div id="app">
  <select @change="changeSelect2" v-model="selection1">
      <option value="item1">item1</option>
      <option value="item2">item2</option>
      <option value="item3">item3</option>
  </select>

  <select v-html="optionsList"></select>
</div>

项目1
项目2
项目3

但这肯定不是最干净的方法，我只是将您的示例转换为原样。 为了更好，选项应该在列表中

---

下面是一个需要开始和理解的小教程：

包含Vue库

永远不要操作DOM（除非别无选择），Vue是数据驱动的

使用

@eventName

将函数放在

方法中

，将变量放在

数据中

通常是这样

v-model

属性是一个双向绑定，当选择列表所选选项更改时，它会触发变量自动更改，这称为“反应性”

如果只想保留其文本值而不是html，请将变量放置在html的

v-html

中，用于html或mustaches

{}

遵循一些教程

<div id="app">
  <select @change="changeSelect2" v-model="selection1">
      <option value="item1">item1</option>
      <option value="item2">item2</option>
      <option value="item3">item3</option>
  </select>

  <select v-html="optionsList"></select>
</div>