v-show和watch监听配合

最新推荐文章于 2024-07-17 21:25:51 发布

原创最新推荐文章于 2024-07-17 21:25:51 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用Vue.js实现的下拉框联动效果，当转出下拉框选择a时，转入下拉框仅显示b和c选项；反之，当转出选择b或c时，转入仅显示a。通过监听转出下拉框变化，自动调整转入下拉框的显示选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、先看效果

监听转出为a的时候，转入只能是b/c

监听转出为b/c的时候，转入只能为a

二、实现代码

//template
<div>
        <span>转出：</span>
        <select v-model="eduTypeOut">
          <option value="a">a</option>
          <option value="b">b</option>
          <option value="c">c</option>
        </select>
      </div>
      <div>
        <span>转入：</span>
        <select class="eduSelect" v-model="eduTypeIn">
          <option v-show="eduTypeOut!='a'" value="a">a</option>
          <option v-show="eduTypeOut=='a'" value="b">b</option>
          <option v-show="eduTypeOut=='a'" value="c">c</option>
        </select>
      </div>

export default {
  data() {
    return {
      eduTypeOut: "a", //转出
      eduTypeIn: "a" //转入
    };
  },
watch: {
    // 监听转出选择
    eduTypeOut(val) {
      if (val=='a') {
        this.eduTypeIn = 'b';
      }else{
        this.eduTypeIn = 'a';
      }
    }
  }
}