這篇文章要跟大家介紹的文章內容是關於Vue中v-model指令的分析（附程式碼），有很好的參考價值，希望可以幫助到有需要的朋友。
1. 指令釋義
v-model在表單控制項或元件上建立雙向綁定，本質上是負責監聽使用者的輸入事件（onchange，onkeyup，onkeydown等，具體是哪個，也請查閱官方底層實作文件）以更新數據，並對一些極端場景進行一些特殊處理。
2. 表單輸入綁定方式與方法
2.1 input框實作雙向資料綁定範例：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label><input type="text" v-model="inputs"/><br/>
<label>你在input框中输入了:</label><span>{{inputs}}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
inputs: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>登入後複製
2.2 textarea多行文字實作雙想資料綁定範例：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label><textarea v-model="text"></textarea><br/>
<label>你在textarea框中输入了:</label><span>{{text}}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
text: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>登入後複製
#2.3 複選框實作資料綁定
單一複選框資料綁定範例：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label><input type="checkbox" id="checkbox" v-model="checked">选我<br/>
<label v-if="checked">选中了:</label>
<label v-if="!checked">没选中:</label>
<span>{{ checked }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
checked: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>登入後複製
#多個複選框實作資料綁定範例：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label>
<input type="checkbox" id="vue1" value="vue1" v-model="checkedValues">vue1
<input type="checkbox" id="vue2" value="vue2" v-model="checkedValues">vue2
<input type="checkbox" id="vue3" value="vue3" v-model="checkedValues">vue3
<br/>
<label>选中了：</label><span>{{ checkedValues }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
checkedValues: []
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>登入後複製
#2.4 單選按鈕實作資料綁定，取得到選取的單選按鈕值顯示出來：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<input type="radio" id="radio1" value="1" v-model="checked">男<br/>
<input type="radio" id="radio2" value="2" v-model="checked">女<br/>
<label> 选中了：{{ checked }}</label>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
checked: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>登入後複製
##2.5 選擇框介紹
方式一選擇框實現雙向資料綁定，首先介紹選擇框實現單一選取時情況，當單選框中options設定disabled屬性時，此options不能被選中，當單選框中options沒有value值時，選取此options時會綁定此options的text文本，當單選框中options有value值時，選取此options時會綁定此options的value值，範例如下：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
selected: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>登入後複製
方式二介紹選擇框多個選取情況，首先需要在select中新增multiple屬性，當單選框中options設定disabled屬性時，此options不能被選中，當單選框中options沒有value值時，選取此options時會綁定此options的text文本，當單選框中options有value值時，選取此options時會綁定此options的value值，然後按下ctrl鍵，點選要選取的options，簡單範例如下：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<select v-model="selected" multiple>
<option disabled value="">请选择</option>
<option>A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
selected: []
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>登入後複製
3. v-model修飾符
3.1 .lazy
在預設情況下，v-model 在每次 input 事件觸發後將輸入方塊的值與資料同步
(除了輸入法組合文字時)。你可以添加 lazy 修飾符，從而轉變為使用
onchange 事件進行同步，當輸入框輸入資料時，資料並不會立即改變，當遊標離開輸入框以後，資料才會實現同步改變，範例程式碼如下：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<!-- 在“change”时而非“input”时更新 -->
<input type="text" id="names" v-model.lazy="msg" ><br/>
<label>输入值：</label>{{msg}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>登入後複製
3.2 .number
如果想要自動將使用者的輸入值轉換成數值類型，將type定義為number類型，請為 v-model 新增 number 修飾符，當使用者輸入數值類型的資料時，v-model.number會自動把輸入的資料轉換為數值類型，注意如果使用者輸入特殊字母e，number屬性不能識別，簡單程式碼範例如下：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<!-- 在“change”时而非“input”时更新 -->
<input type="number" id="names" v-model.number="msg" ><br/>
<label>输入值：</label>{{msg}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>登入後複製
3.3 .trim
#如果要自動過濾使用者輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符，在輸入框起始時候多加入幾個空格，當遊標離開之後，trim屬性會自動過濾收尾空格，簡單程式碼範例如下：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>无trim属性</label>
<input type="text" id="names" v-model="msg1" ><br/>
<label>输入值：</label>{{msg1}}<br/>
<label>有trim属性</label>
<input type="text" id="names2" v-model.trim="msg2" ><br/>
<label>输入值：</label>{{msg2}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg1: '',
msg2: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>登入後複製
4. 元件中使用v-model
4.1 自定义组件v-model
一个组件上的 v-model 默认会利用名为 value 的 prop
和名为 input 的事件，但是像输入框、单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。本文以自定义输入框和onchange事件为例，在输入框输入值，当光标离开以后输入值会输出绑定到置顶位置：
1. 在index中声明组件（在index声明的组件为全局组件，全局可用）：
Vue.component('base-text', {
model: {
prop: 'value',
event: 'change'
},
props: {
checked: Boolean
},
template: `<input type="text" id="inputs" v-on:change="$emit('change', $event.target.value)">`
});
=登入後複製
2. 在要使用该组件的插件中声明：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<base-text v-model="msg"></base-text><br/>
<label>你输入了:</label>{{msg}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>登入後複製
3. 结果示例如下：
相关推荐:
对4-v-bind指令的分析（附代码）
以上是Vue中v-model指令的分析（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
