表单输入绑定

v-model指令会在表单输入控件上创建数据的双向绑定,对于各种不同的表单控件,v-model绑定的通常是true/falsevalue值,下面一一进行介绍。

文本框 text

text绑定的是输入的value值。

<input type="text" v-model="msg">

多行文本框 textarea

textarea绑定的是该元素的文本值(用户输入的值)。

<textarea v-model="msg"></textarea>

复选框 checkbox

单个checkbox,绑定的值是truefalse

<input type="checkbox" v-model="checked">

多个checkbox记得要绑定到同一个数组,数组内的值是复选框的value值。

<input type="checkbox" value="a" v-model="checked">
<input type="checkbox" value="b" v-model="checked">
<input type="checkbox" value="c" v-model="checked">

单选框 radio

radio是成组使用的,绑定的值是value属性的值。

<input type="radio" value="a" v-model="picked">
<input type="radio" value="b" v-model="picked">

下拉选框 select

单选的select中,绑定的是option元素中的文本值。

<select v-model="picked">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>

多选的select中,绑定的是option元素中的文本值到一个数组。

<select v-model="picked" multiple>
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap