67-[重点]双向数据绑定-单选项——多选项

最新推荐文章于 2024-03-22 14:31:43 发布

longfei815

最新推荐文章于 2024-03-22 14:31:43 发布

阅读量107

点赞数

分类专栏：前端基础知识文章标签： java 前端 html javascript vue.js

本文链接：https://blog.csdn.net/jolinoy/article/details/125656188

版权

前端基础知识专栏收录该内容

75 篇文章 2 订阅

订阅专栏

67-[重点]双向数据绑定-单选项——多选项

效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>67-[重点]双向数据绑定-单选项——多选项</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id='app'>
      <input type="radio" v-model="gender" value="man">男
      <input type="radio" v-model="gender" value="woman">女
      <input type="radio" v-model="gender" value="sc">保密
      <!-- radio是单选，gender是性别 -->
      <p>{{gender}}</p>

      <hr>
      <input type="checkbox" value="xx" v-model="hobby"> 学习
      <input type="checkbox" value="sj" v-model="hobby"> 睡觉
      <input type="checkbox" value="bg" v-model="hobby"> 八卦
      <input type="checkbox" value="cg" v-model="hobby"> 吃瓜
      <p>{{hobby}}</p>


  </div>  
  <script>
    new Vue({
      el:'#app',
      data:{
        gender:"man",
        hobby:[]
      }
    })
  </script>
</body>
</html>