【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>
相关推荐
觉醒法师3 分钟前
HarmonyOS开发 - 电商App实例二( 网络请求http)
前端·http·华为·typescript·harmonyos·ark-ts
沈剑心3 分钟前
Kotlin的协程,真能提升编程效率么?
android·前端·kotlin
ZXT13 分钟前
项目精讲 - keepAlive
vue.js
堕落年代13 分钟前
Vue主流的状态保存框架对比
前端·javascript·vue.js
没资格抱怨15 分钟前
el-pagination的使用说明
javascript·vue.js·elementui
沐千熏20 分钟前
Liunx(CentOS-6-x86_64)使用Nginx部署Vue项目
vue.js·nginx·centos
OpenTiny社区24 分钟前
TinyVue的DatePicker 组件支持日期面板单独使用啦!
前端·vue.js
冴羽24 分钟前
Svelte 最新中文文档教程(22)—— Svelte 5 迁移指南
前端·javascript·svelte
树上有只程序猿28 分钟前
Vue3组件通信:多个实战场景,轻松玩转复杂数据流!
前端·vue.js
青红光硫化黑34 分钟前
React基础之useEffect
javascript·react.js·ecmascript