Question

我的要求是这样的。

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

如果用户选择了Live Paper，则必须显示另外两个html input elements（datatime-local，time）。

如果用户选择了普通纸，则应隐藏这两个附加输入元素。我如何通过vueJS实现这一目标。

这是我的代码。

＆＃13;

<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>

＆＃13;

Answer 1

查看这些文档：

此外，您可以从社区中找到大量资源来了解VueJS中的视图绑定和表单：

Answer 2

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

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

将此selected属性绑定到两个无线电输入。请注意，无线电输入的value属性分别设置为live和normal

在有条件想要渲染的div上设置v-if。仅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>

这是fiddle 参考：radio inputs

VueJS使用单选按钮进行简单的访问

2 个答案: