【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>
相关推荐
weixin_425543732 分钟前
TRAE CN3.3.25 构建的Electron简易DEMO应用
前端·typescript·electron·vite·nestjs
Mr Xu_1 小时前
【Vue3 + ECharts 实战】正确使用 showLoading、resize 与 dispose 避免内存泄漏
前端·信息可视化·vue·echarts
0思必得01 小时前
[Web自动化] Selenium设置相关执行文件路径
前端·爬虫·python·selenium·自动化
雯0609~1 小时前
hiprint:实现项目部署与打印1-官网提供普通html版本
前端·html
yuezhilangniao1 小时前
AI智能体全栈开发工程化规范 备忘 ~ fastAPI+Next.js
javascript·人工智能·fastapi
不绝1912 小时前
UGUI——进阶篇
前端
~牧马~2 小时前
【记录63】electron打包vue项目之踩坑
vue.js·electron·electron与node兼容
Exquisite.2 小时前
企业高性能web服务器(4)
运维·服务器·前端·网络·mysql
铅笔侠_小龙虾3 小时前
Flutter Demo
开发语言·javascript·flutter
2501_944525543 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 账户详情页面
android·java·开发语言·前端·javascript·flutter