【Vue #3】指令补充&样式绑定-二、v-model 用在其他表单元素

时间：2025-04-13 14:01:41

常见的表单元素都可以用 v-model绑定关联,作用是可以快速 获取 或 设置 表单元素的值

它会根据 控件类型 自动选取 正确的属性 来更新元素

  • 输入框 input:text ——> value

  • 文本域 textarea ——> value

  • 下拉菜单 select ——> value

    • v-model 写在select上，关联是选中option的 value

  • 单选框 input:radio ——> value

    • 给单选框添加value属性，v-model 收集选中单选框的value

  • 复选框 input:checkbox ——> checked / value

    • 一个复选框：v-model 绑定 布尔值，关联 checked 属性
    • 一组复选框：v-model 绑定 数组，关联 value 属性，给复选框 手动添加 value
<script setup>
import { ref } from 'vue'
const intro = ref('') // 介绍
const city = ref('SH') // 城市
const blood = ref('ab') // 血型
const isAgree = ref(false) // 同意协议
const hobby = ref(['ZQ', 'PB']) // 爱好
</script>
<template>
  <!-- 1. 文本域 -->
  <textarea v-model="intro" cols="30" rows="4" placeholder="请输入自我介绍"></textarea> <br /><br />
  <!-- 2. 下拉菜单 -->
  <select v-model="city">
    <option value="BJ">北京</option>
    <option value="CS">长沙</option>
    <option value="SH">上海</option>
  </select>
  <br /> <br />
  <!-- 3. 单选框: 多个当中只能选一个 -->
  <input type="radio" value="a" v-model="blood" />A
  <input type="radio" value="b" v-model="blood" />B
  <input type="radio" value="ab" v-model="blood" />AB
  <br /><br />
  <!-- 4. 复选框  -->
  <input type="checkbox" v-model="isAgree" />是否同意用户协议

  <br />
  <br />
  <input v-model="hobby" type="checkbox" value="LQ" />篮球
  <input v-model="hobby" type="checkbox" value="ZQ" />足球
  <input v-model="hobby" type="checkbox" value="PB" />跑步
</template>

相关文章