v-model语法糖原理

---

前言

学习v-model 语法糖原理

---

提示：以下是本篇文章正文内容，下面案例可供参考

一.v-model语法糖原理

1.常规用法

<div id="app">
    <input type="text" v-model="message"/>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message: "既然选择远方，风雨兼程",
        }
    });
</script>

2. v-model 语法糖原理

<div id="app">
	<input type="text" @input="message=$event.target.value"/>
	<div>{{message}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message: "",
        }
    });
</script>

---

总结

学习v-model语法糖原理