v-model文法糖原理

文章目錄

• 前言
• 一.v-model文法糖原理
• • 1.正常用法
  • 2. 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文法糖原理