表单绑定cn.vuejs.orgcn.vuejs.org/tutorial
我们可以同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定：
v-modelv-model 不仅支持文本输入框，也支持诸如多选框、单选框、下拉框之类的输入类型
v-model重构| 控件类型 | v-model 绑定的属性 | v-model 监听的事件 | 绑定值类型 |
|---|---|---|---|
| 文本框 | value | input | 字符串 |
| 复选框 | checked | change | 布尔值或数组 |
| 单选框 | checked | change | 字符串 |
| 下拉框（单选） | value | change | 字符串 |
| 下拉框（多选） | value | change | 数组 |
| 指令 | 用途 |
|---|---|
v-bind | 把 Vue 的数据 → HTML 属性 |
v-on | 把 HTML 的事件 → Vue 方法 |
v-model | 双向绑定（数据 ←→ 控件） |
<input :value="text" @input="onInput"><script setup>
import { ref } from 'vue'
const text = ref('')
function onInput(e) {
text.value = e.target.value
}
</script>
<template>
<input :value="text" @input="onInput" placeholder="Type here">
<p>{{ text }}</p>
</template><input v-model="text"><script setup>
import { ref } from 'vue'
const text = ref('')
function onInput(e) {
text.value = e.target.value
}
</script>
<template>
<input v-model="text" placeholder="Type here">
<p>{{ text }}</p>
</template>
<script setup>
import { ref } from 'vue'
// 用来保存用户选中的水果（数组）
const selectedFruits = ref([])
// 提供可选水果列表
const fruitOptions = ['🍎 苹果', '🍌 香蕉', '🍇 葡萄', '🍓 草莓', '🍍 菠萝']
</script>
<template>
<div class="box">
<h2>请选择你喜欢的水果：</h2>
<!-- 多个复选框绑定到同一个 v-model -->
<div v-for="fruit in fruitOptions" :key="fruit">
<label>
<input type="checkbox" :value="fruit" v-model="selectedFruits" />
{{ fruit }}
</label>
</div>
<hr />
<p>你选择的水果有：</p>
<ul>
<li v-for="(fruit, index) in selectedFruits" :key="index">{{ fruit }}</li>
</ul>
</div>
</template>
<style scoped>
.box {
padding: 20px;
border: 2px solid #ccc;
border-radius: 8px;
width: 300px;
}
label {
display: block;
margin: 8px 0;
}
</style>课程目录