欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中的表單輸入綁定,雙向綁定方式

 更新時間：2025年03月25日 16:37:44   作者：天馬3798  
這篇文章主要介紹了Vue中的表單輸入綁定,雙向綁定方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、v-model 指令

  • 用于Vue 表單雙向綁定
  • 用戶Vue 組件屬性雙向綁定

v-model 還可以用于各種不同類型的輸入，<textarea>、<select> 元素。

它會根據(jù)所使用的元素自動使用對應的 DOM 屬性和事件組合：

  • 文本類型的 <input> 和 <textarea> 元素會綁定 value property 并偵聽 input 事件；
  • <input type="checkbox"> 和 <input type="radio"> 會綁定 checked property 并偵聽 change 事件；
  • <select> 會綁定 value property 并偵聽 change 事件。

二、v-model 使用案例

  • 文本
姓名：
<input type="text" v-model="student.name">
  • 多行文本
簡介：
<textarea v-model="student.summary"></textarea>
  • 單選
所屬省份：
<template v-for="item in areas">
    <div>
    <label > <input type="radio" name="area" :value="item" v-model="student.province">{{item}}</label>
    </div>
</template>
<script>
export default {
    data() {
        return {
            student: {
                name: '張三',
                score: 100.5,
                password: ' 1234 '
            },
            age: 10.8,
            areas: ['濟南', '聊城', '北京']
        }
    }
}
</script>
  • 多選
多選省份：
<template v-for="item in areas">
    <div>
        <label> <input type="checkbox" name="checkvalue" :value="item" v-model="student.checkvalue">{{ item }}</label>
    </div>
</template>
export default {
    data() {
        return {
            student: {
                checkvalue:[]//多選框需要對應數(shù)組
            }
        }
    }
}
  • 下拉選擇
下拉選擇：
<select v-model="student.sel">
    <option :value="item" v-for="item in areas">{{ item }}</option>
</select>

三、v-model 修飾符

.lazy?

  • 默認情況下，v-model 會在每次 input 事件后更新數(shù)據(jù) (IME 拼字階段的狀態(tài)例外)。
  • 你可以添加 lazy 修飾符來改為在每次 change 事件后更新數(shù)據(jù)：
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

.number?

  • 如果你想讓用戶輸入自動轉(zhuǎn)換為數(shù)字。
  • 你可以在 v-model 后添加 .number 修飾符來管理輸入：
<input type="number" v-model.number="student.score">
  • 如果該值無法被 parseFloat() 處理，那么將返回原始值。
  • 特別是當輸入為空時 (例如用戶清空輸入字段之后)，會返回一個空字符串。

注意：要制定type=number html屬性

.trim?

  • 如果你想要默認自動去除用戶輸入內(nèi)容中兩端的空格。
  • 你可以在 v-model 后添加 .trim 修飾符：
<input v-model.number="student.password">

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論