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>