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

Question

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

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

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

Answer 2

我用javascript完成了它.onclick它调用隐藏＆amp; amp;显示元素反之亦然

＆＃13;

＆＃13;

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';
}

＆＃13;

#round{
display:none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;