Vue学习之路09----表单输入绑定

​

​ 表单的绑定一般使用v-model进行双向绑定

1.文本

<p>姓名为: {{ name }}</p>
<input v-model="name" placeholder="输入姓名" />

2.文本框

<span>评论:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="请输入你的评论"></textarea>

3.复选框

<template>
  <div>已选车辆: {{ cars }}</div>

  <input type="checkbox" id="bc" value="奔驰" v-model="cars" />
  <label for="bc">奔驰</label>

  <input type="checkbox" id="bm" value="宝马" v-model="cars" />
  <label for="bm">宝马</label>

  <input type="checkbox" id="lbjn" value="兰博基尼" v-model="cars" />
  <label for="lbjn">兰博基尼</label>
</template>
<script setup name="App">
  import { ref } from "vue";
  let cars=ref([])
</script>
<style scoped></style>

4.选择器

单选：

<div>选择: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

多选：

<div>选择: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>