基础用法
可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型<a href="/tag/zidong/" target="_blank" class="keywords">自动</a>选取正确的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p> <p><h3>注：</h3></p> <p>1.v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。</p> <p>2.对于需要使用输入法 (如<a href="/tag/zhongwen/" target="_blank" class="keywords">中文</a>、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合<a href="/tag/wenzi/" target="_blank" class="keywords">文字</a>过程中得到更新。如果你也想处理这个过程，请使用 input 事件。</p> <p><span style="background-color: #ccffcc"><h3>输入框</h3></p> <p><span style="color: #000000"><h3>案例1</h3></p> <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html> @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_25@ <head> <<a href="/tag/Meta/" target="_blank" class="keywords">Meta</a> charset="utf-8"> <title>Vue 测试实例 - 输入框</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>input 元素：{{ message }}</p> <input v-model="message" placeholder="编辑我……"> <p><p style="white-space: pre">textarea 元素：{{ message2 }}</p><br /> <textarea v-model="message2" placeholder="多行文本输入……">
