VueJS - 如何在单选按钮选择上显示不同的 div答案

【问题标题】：VueJS - how to show different div on radio button selectVueJS - 如何在单选按钮选择上显示不同的 div
【发布时间】：2017-12-16 10:22:47
【问题描述】：

如何在单选按钮选择上显示不同的组件。

<input type="radio" name="book" value="One" checked="checked">
<input type="radio" name="book" value="Round">

      <div> // this should show show default, One is selected
        <p>Value One</p>
      </div>
      <div> // this should show show on radio change to Round selected
        <p>Value Round</p>
      </div>

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

这样的事情怎么样？

new Vue({
  el: '#app',
  data: {
    x: 'one',
  },
});

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <input type="radio" v-model="x" value="one">
  <input type="radio" v-model="x" value="two">
  
  <div v-show="x === 'one'">One</div>
  <div v-show="x === 'two'">Two</div>
</div>

【讨论】：

我会将 v-show 替换为 v-if ，因为在您的情况下，这两个组件都是立即创建的。在这种情况下这是一个小问题，但对于大型组件，这可能很重要。
太棒了！谢谢托马斯，就这么简单：P。如果您愿意，请分享 v-if 以满足我未来的需求。

【解决方案2】：

我已经用 javascript 完成了。onclick 它调用每个隐藏和显示元素的函数，反之亦然

function rdone(){
  document.getElementById('one').style.display ='block';
  document.getElementById('round').style.display ='none';
}
function rdround(){
  document.getElementById('round').style.display = 'block';
  document.getElementById('one').style.display ='none';
}

#round{
display:none;
}

<input type="radio" name="book" value="One" checked="checked" onclick="rdone();">
<input type="radio" onclick="rdround();" name="book" value="Round">

      <div id=one> // this should show show default, One is selected
        <p>Value One</p>
      </div>
      <div id=round> // this should show show on radio change to Round selected
        <p>Value Round</p>
      </div>

【讨论】：

感谢您的建议，但我正在寻找特定于 VueJS 的内容