如何基于vue js选择的另一个选择选项更改选择选项

2024-04-24 • 问答

我想使用它，但是在Vue Version中制作时遇到了麻烦。我已经在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>

$(document).ready(function() {

    $("#type").change(function() {
        var val = $(this).val();
        if (val == "item1") {
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");

        } else if (val == "item3") {
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");

        }
    });


});

以下是操作方法示例：https://codepen.io/antoniandre/pen/OJJQMGN?editors=1010

new Vue({
  el: '#app',data: () => ({
    selection1: null,optionsList: ''
  }),methods: {
    changeSelect2 () {
      switch (this.selection1) {
          case 'item1':
            this.optionsList = '<option value="test">item1: test 1</option><option value="test2">item1: test 2</option>'
            break;
          case 'item2':
            this.optionsList = '<option value="test">item2: test 1</option><option value="test2">item2: test 2</option>'
            break;
          case 'item3':
            this.optionsList = '<option value="test">item3: test 1</option><option value="test2">item3: test 2</option>'
            break;
      }
    }
  }
})

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>

但这绝对不是最干净的方法，我只是按原样转换了您的示例。为了使它更好，这些选项应该在列表中。

以下是一些教程的开始和理解：

包括Vue库
永远不要操纵DOM（除非没有选择），Vue是数据驱动的
使用@eventName来监听DOM元素上的DOM事件
将您的函数放在methods中，并将您的var放在data中
v-model属性是一种双向绑定，当选择列表中所选选项更改时，触发变量自动更改，这称为“反应性”。
如果您只想保留文本值而不是HTML，则将变量放在v-html中的HTML中以获取HTML或胡须{{ }}。
按照一些教程

如何基于vue js选择的另一个选择选项更改选择选项

dingdingzhengwei 回答：如何基于vue js选择的另一个选择选项更改选择选项

大家都在问