面试问:v-model在不同的情境下,实现方式是不同的,你可以实现所有表单输入时双向绑定的功能吗
1、在input框中type=text 和 textarea 中的实现
// v-model借助元素的 value 属性和 input 事件实现双向绑定
// 模拟v-model,具体实现如下
<div id='app'>
<input type='text' :value='msg' @input='input'>
{{msg}}
<div>
let app = new Vue({
el: '#app',
data:{
msg: ''
},
methods:{
input:function(e){
this.msg = e.target.value
}
}
})
同理textarea也是这样实现的
<div id='app'>
<textarea :value='msg' @input='input'></textarea>
{{msg}}
<div>
let app = new Vue({
el: '#app',
data:{
msg: ''
},
methods:{
input:function(e){
this.msg = e.target.value
}
}
})
复制代码
2、在input框type是checkbox和radio的实现
// checkbox是一个值的时候
// 借助checked 属性和 change 事件实现
<div id='app'>
<input type='checkbox' :checked='msg' @change='input'>
{{msg}}
<div>
let app = new Vue({
el: '#app',
data:{
msg: false
},
methods:{
input:function(e){
const target = e.target
// 可以用三元运算符返回值
this.msg = !this.msg
}
}
})
// 多个checkbox,用数组来存数据
<div id='app'>
<input type='checkbox' value='one' @change='input'>
<input type='checkbox' value='two' @change='input'>
{{msg}}
<div>
let app = new Vue({
el: '#app',
data:{
msg: []
},
methods:{
input:function(e){
const target = e.target
const msg = this.msg
if(target.checked){
msg.push(target.value)
}else{
msg.splice(msg.indexOf(target.value),1)
}
}
}
})
// radio的双向绑定实现
<div id="app">
<input type="radio" name='rad' value='one' @change="input"> </input >
<input type="radio" name='rad' value='two' @change="input"> </input >
{{a}}
</div>
let app = new Vue({
el:'#app',
data: {
a: [],
},
methods:{
input:function(e){
e.target.checked = true;
this.a=e.target.value
}
}
})
复制代码
3、select 框双向绑定实现
// 利用select标签的value属性和change事件
<div id="app">
<select :value='a' @change='input'>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ a }}</span>
</div>
let app = new Vue({
el: '#app',
data: {
a: '',
},
methods: {
input: function (e) {
this.a = e.target.value
}
}
})
复制代码