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>