Vue中v-model指令的分析（附程式碼）
- 不言原創
- 2018-07-27 13:07:312782瀏覽
這篇文章要跟大家介紹的文章內容是關於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>
<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>
<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>
<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>
<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>
<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.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: `2400e468162d3351c3830365ac837994`
});
=
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. 结果示例如下：
相关推荐:
以上是Vue中v-model指令的分析（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn