面試：你可以實現一下vue的v-model嗎？

lio-mengxiang發表於2019-03-08
面試Vue

面試問：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
        }
    }
})
複製程式碼

相關文章