如何将VueJS中的单个切换按钮改为两个显示/隐藏按钮

修改模板代码 #

将原来的单个切换按钮替换为两个独立按钮，分别绑定设置isViewable为true和false的点击事件：

<!-- 替换原有的切换按钮 -->
<button v-on:click="isViewable = true">显示搜索框1</button>
<button v-on:click="isViewable = false">显示搜索框2</button>

<!-- 原有内容保持不变 -->
<span v-if="isViewable">
  <input
    class="form-control form-control-lg d-none d-md-block"
    type="text"                   
    v-model="search_input"                   
  />
</span>
<span v-if="!isViewable">
  <input
    class="form-control form-control-lg d-none d-md-block"
    type="text"                    
    v-model="search_input_2"                   
  /> 
</span>

脚本代码（无需修改） #

你的data部分不需要改动，因为我们只是直接修改isViewable的值：

data: function () {
  return {
    isViewable: true,
    // 其他原有数据...
  }
}

可选：使用方法实现（更易维护） #

如果希望逻辑更清晰或后续需要扩展功能，可以在methods中定义两个方法，再绑定到按钮点击事件：

修改后的脚本代码：

data: function () {
  return {
    isViewable: true,
    // 其他原有数据...
  }
},
methods: {
  showFirstInput() {
    this.isViewable = true;
  },
  showSecondInput() {
    this.isViewable = false;
  }
}

对应的模板代码：

<button v-on:click="showFirstInput">显示搜索框1</button>
<button v-on:click="showSecondInput">显示搜索框2</button>

<!-- 原有内容保持不变 -->
<span v-if="isViewable">...</span>
<span v-if="!isViewable">...</span>

这样两个按钮就分别实现了显示对应输入框的功能，完全替代了原来的切换逻辑。

内容的提问来源于stack exchange，提问作者user13928344