表单输入绑定

我们时常需要获取表单数据，如果使用事件监听器会很麻烦,例如:

 <div class="mess"> Name is: {{ name }} </div>
 <div class="form">
    <input type="text" @input="getName">
 </div>

const name = ref('')
const getName = (e) => { 
    name.value = e.target.value
}

可以达到想要的效果，获取到了输入框数据:

以上做法虽然可以用但是过于复杂，我们使用v-model来简化代码，如下:

<div class="mess"> Name is: {{ name }} </div>
<div class="form">
    <input type="text" v-model="name">
</div>

const name = ref('')

基本用法

文本

<div class="mess"> Name is: {{ name }} </div>
<div class="form">
    <input type="text" v-model="name">
</div>

多行文本

<span> name is:</span>
<p style="white-space: pre-line;">{{ name }}</p>
<textarea v-model="name"></textarea>

复选框

checked值默认是false未选中状态，勾选之后为true

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

const checked = ref(false)

效果如图:

我们也可以将多个复选框绑定到同一个数组或集合的值：

<div>dataList: {{ checkedNames }}</div>
<input type="checkbox" id="xiaomi" value="xiaomi" v-model="checkedNames">
<label for="xiaomi">xiaomi</label>

<input type="checkbox" id="apple" value="apple" v-model="checkedNames">
<label for="xiaomi">xiaomi</label>

<input type="checkbox" id="redmi" value="redmi" v-model="checkedNames">
<label for="xiaomi">xiaomi</label>

const checkedNames = ref([])

效果如图:

单选按钮

<div>name: {{ picked }}</div>

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

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

const picked = ref('')

效果如图:

选择器

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">请选择手机</option>
  <option>xiami</option>
  <option>apple</option>
  <option>redmi</option>
</select>

const selected = ref('')

效果如下: