带有单选按钮的 VueJS 简单工具化

Question

我的要求是这样的。

我有两个单选按钮，即活纸和普通纸

如果用户选择 Live Paper 另外两个 html input elements( datatime-local,time必须显示 )。

如果用户选择了普通纸，这两个额外的输入元素应该是隐藏的。我如何通过 vueJS 实现这一点。

这是我的代码。

<div class="row">
    <div class="col">
      <input type="radio" name="paper" value="">Live Papaer
      <br>
      Live on <input type="datetime-local" name="" value="" > Time <input type="time" name="" value="">
    </div>
    <div class="col">
      <input type="radio" name="paper" value="">Normal Paper
    </div>
  </div>

Answer 1

只需初始化selected在您的数据选项中命名的属性

new Vue({
   el:"#app",
   data(){
       return{
           selected: 'live'
       }
   }
 })

将此selected属性绑定到两个无线电输入。看到valueradio输入的属性分别设置为live和normal

v-if在您有条件地想要渲染的 div 上设置。该v-if是唯一真正的当selected === 'live'

<div id="app">    
    <div class="row">
        <div class="col">
          <input type="radio" name="paper" v-model="selected" value="live">Live Papaer
          <div v-if="selected === 'live'">
              Live on <input type="datetime-local" name="" value="" > Time <input type="time" name="" value="">
          </div>
        </div>
        <div class="col">
          <input type="radio" name="paper" v-model="selected" value="normal">Normal Paper
        </div>
   </div>

这是小提琴 参考： 无线电输入