输入绑定

表单输入绑定免费看

11-10侠课岛    新上线 基础入门       

前端/前端/Vue入门教程 18     0     95

本节我们学习 Vue 中表单输入绑定。需要用到 v-model 指令,v-model 指令可以在表单及元素上创建双向数据绑定。根据控件类型自动选取正确的方法来更新元素。

基础用法

v-model 指令可以用于在表单元素 <input><textarea><select> 上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

提示:v-model 会忽略所有表单元素的 valuecheckedselected 属性的初始值而总是将当前活动实例的数据作为数据来源。我们应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

  • texttextarea 元素使用 value 属性和 input 事件。
  • checkboxradio 使用 checked 属性和 change 事件。
  • select 字段将 value 作为 prop 并将 change 作为事件。

单行文本 (Text)

下面是一个单行文本输入框的例子:

<div id="app">
  <input v-model="message" placeholder="编辑内容" />
  <p>输入内容为: {{ message }}</p>
</div>
Vue.createApp({
  data() {
    return {
      message: ''
    }
  }
}).mount('#app')

演示效果:

上述代码中,通过 v-model 指令给输入框 inputmessage 形成双向绑定,当 input 中数据发生改变时 message 也会发生改变。

多行文本 (textarea)

下面是一个多行文本的例子:

<div id="app">
    <textarea v-model="message" placeholder="请输入文本内容"></textarea>
    <p style="white-space: pre-line;">输入的内容为: {{ message }}</p>
</div>
Vue.createApp({
  data() {
    return {
      message: ''
    }
  }
}).mount('#app')

演示效果:

上述代码,我们通过 v-model 指令给输入框 textareamessage 形成双向绑定,当 textarea 中数据发生改变时 message也会发生改变。

单选框 (Radio)

下面是一个单选框的例子:

<div id="app">
    <input type="radio" id="orange" value="橘子" v-model="picked" />
    <label for="orange">橘子</label>
    <br />
    <input type="radio" id="banana" value="香蕉" v-model="picked" />
    <label for="banana">香蕉</label>
    <br/>
    <input type="radio" id="watermelon" value="西瓜" v-model="picked" />
    <label for="watermelon">西瓜</label>
    <p><span>选择一个最喜欢的水果: {{ picked }}</span></p>
</div>
Vue.createApp({
  data() {
    return {
      picked: ''
    }
  }
}).mount('#app')

演示效果:

上述代码,我们通过 v-model 指令给单选按钮 radiopicked 形成双向绑定,当 radio 改变选中状态时 picked 也会发生改变。

复选框 (Checkbox)

单个复选框,绑定到布尔值:

<div id="app">
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
</div>
Vue.createApp({
  data() {
    return {
      checked: false
    }
  }
}).mount('#app')

演示效果:

在上述代码中,我们通过 v-model 指令给复选框 checkboxchecked 形成双向绑定,当复选框改变选中状态时 checked 也会发生改变。

多个复选框,绑定到同一个数组:

<div id="app">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
    <label for="mike">Mike</label>
    <p><span>选中的名称为: {{ checkedNames }}</span></p>
</div>
Vue.createApp({
  data() {
    return {
      checkedNames: []
    }
  }
}).mount('#app')

演示效果:

下拉框 (Select)

下面是一个下拉框s的例子:

<div id="app">
    <select v-model="selected">
      <option disabled value="">请选择一个星期:</option>
      <option>星期一</option>
      <option>星期二</option>
      <option>星期三</option>
      <option>星期四</option>
      <option>星期五</option>
    </select> 
    <span>你的选择为:{{ selected }}</span>
  </div>
Vue.createApp({
  data() {
    return {
      selected: ''
    }
  }
}).mount('#app')

演示效果:

值绑定

对于单选按钮、复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值):

<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- 当选中第一个选项时,`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有时我们可能想把值绑定到当前活动实例的一个动态属性上,这时可以用 v-bind 实现,并且使用 v-bind 可以将输入值绑定到非字符串。

复选框绑定值

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

上述代码中,通过 true-valuefalse-value 给复选框指定来选中和非选中的值,当选中时 vm.isDelivery === 'yes',没有选中时 vm.isDelivery === 'no'

单选框绑定值

<input type="radio" v-model="pick" v-bind:value="a" />

上述代码中,通过 v-bind:valueoption 指定 value 值,当该 option 选中时 vm.pick 的值为 a

修饰符

.lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />

.number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

<input v-model.number="age" type="number" />

这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

<input v-model.trim="msg" />

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

18

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?