【Vue】双向绑定 v-model

html 复制代码
<script setup>
  import { reactive,ref} from 'vue' 
  let hbs = ref([]); //装爱好的值
</script>

<template>
  <div>
    吃 <input type="checkbox" name="hbs" v-model="hbs" value="吃"> 
    喝 <input type="checkbox" name="hbs" v-model="hbs" value="喝">
    玩 <input type="checkbox" name="hbs" v-model="hbs" value="玩">
    乐 <input type="checkbox" name="hbs" v-model="hbs" value="乐">
    <br>
    {{ hbs }}
  </div>
</template> 

<style scoped>

</style>
相关推荐
quo-te9 分钟前
AJAX简介
前端·ajax·okhttp
bingbingyihao20 分钟前
通过代码获取接口文档工具
开发语言·前端·javascript
月伤5920 分钟前
JS中Map对象与数组的相互转换
前端·javascript·html
SEO_juper2 小时前
解密 URL 参数:如何利用它们提升网站性能和用户体验
前端·javascript·ux·seo·url·数字营销·谷歌seo
nuIl2 小时前
让 Cursor 帮你把想法落地
前端·ai编程
HyaCinth2 小时前
Taro 数字滚动组件
javascript·react.js·taro
去伪存真2 小时前
看我如何破解api接口文档定义空白, 还不想手动写接口TS类型定义的困局
前端·typescript
skyWang4162 小时前
Vite模块联邦(vite-plugin-federation)实现去中心化微前端后台管理系统架构
前端
喝拿铁写前端2 小时前
你以为你是中级前端,其实你还停留在执行阶段-完整前端成长之路
前端
前端卧龙人3 小时前
uniapp开发技巧:开启代理与gzip优化实践
前端