表单单选按钮

知识点

  • v-model
  • input[type=”radio”]

表单单选按钮绑定

  1. <div id="myApp">
  2. <h1>表单单选按钮</h1>
  3. <h3>选择性别</h3>
  4. <input type="radio" id="male" value="男" v-model="pickedSex">
  5. <label for="male"></label>
  6. <br>
  7. <input type="radio" id="female" value="女" v-model="pickedSex">
  8. <label for="female"></label>
  9. <h3>选择爱好</h3>
  10. <input type="radio" id="game" value="玩游戏" v-model="pickedHobby">
  11. <label for="game">玩游戏</label>
  12. <br>
  13. <input type="radio" id="movie" value="看电影" v-model="pickedHobby">
  14. <label for="movie">看电影</label>
  15. <h3>选择结果</h3>
  16. <p>性别: {{ pickedSex }}</p>
  17. <p>爱好: {{ pickedHobby }}</p>
  18. </div>
  19. <script>
  20. var myApp = new Vue({
  21. el: '#myApp',
  22. data: {
  23. pickedSex: "",
  24. pickedHobby: "",
  25. },
  26. methods: {
  27. },
  28. });
  29. </script>

源文件

小马视频频道

http://komavideo.com