基于单选按钮选择的vue.js显示/隐藏输入字段

以下是一个基于单选按钮选择的vue.js显示/隐藏输入字段的解决方法的代码示例：

<div id="app">
  <label for="showInput">显示输入字段：</label>
  <input type="radio" id="showInput" value="true" v-model="show" />
  <label for="hideInput">隐藏输入字段：</label>
  <input type="radio" id="hideInput" value="false" v-model="show" />

  <br />

  <input type="text" v-if="show === 'true'" />

  <br />

  <button @click="toggleShow">切换显示/隐藏</button>
</div>

new Vue({
  el: "#app",
  data: {
    show: "true",
  },
  methods: {
    toggleShow() {
      this.show = this.show === "true" ? "false" : "true";
    },
  },
});

在上面的代码中，我们使用了一个show属性来跟踪单选按钮的选择。当选择“显示输入字段”时，show属性的值为true，当选择“隐藏输入字段”时，show属性的值为false。

在<input>元素的v-if指令中，我们使用了show === 'true'条件来决定是否显示输入字段。如果show属性的值为true，则显示输入字段；如果show属性的值为false，则隐藏输入字段。

最后，我们定义了一个toggleShow方法，当点击“切换显示/隐藏”按钮时，该方法会切换show属性的值，从而切换输入字段的显示/隐藏状态。

这样，当选择不同的单选按钮时，输入字段会根据选择的值进行显示或隐藏。同时，点击“切换显示/隐藏”按钮也可以切换输入字段的显示/隐藏状态。