vue 雙向綁定 v-model

如果要在頁面其他部分實時顯示我們在input輸入框中輸入的內容

原生js這樣寫

    <h4 id="h4"></h4>
    <input type="text" id="input" oninput="fun()">
    <script>
        function fun() {
            var content = document.getElementById('input').value;
            document.getElementById('h4').innerHTML = content;
        }
    </script>

 

在vue中，可以這樣寫

    <div id="test">
        <h4>{{ val }}</h4>
        <input type="text" :value='val' @input="fun">
    </div>
    <script>
        const vm = new Vue({
            el: "#test",
            data: {
                val: 'k',
            },
            methods: {
                fun(e) {
                    this.val = e.target.value;
                }
            }
        })
    </script>

但是這種寫法有點麻煩，可以用vue的雙向綁定功能  v-model

代碼如下

    <div id="test">
        <h4>{{ val }}</h4>
        <input type="text" v-model='val'>
    </div>
    <script>
        const vm = new Vue({
            el: "#test",
            data: {
                val: '',
            },
        })
    </script>