当前阅读教程:Vue.JS入门教程 > 基础用法 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Vue.js 表单和双向数据绑定 | 下一篇: v-model指令(input)(双向数据绑定) |
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model本质上是一个语法糖。如下代码 <input v-model="test"> 本质上是 <input :value="test" @input="test = $event.target.value"> 其中@input是对<input>输入事件的一个监听 :value="test"是将监听事件中的数据放入到input,下面代码是v-model的一个简单的例子。 在这边需要强调一点,v-model不仅可以给input赋值还可以获取input中的数据,而且数据的获取是实时的,因为语法糖中是用@input对输入框进行监听的。 可以在如下div中加入<p>{{ test}}</p>获取input数据,然后去修改input中数据会发现<p></p>中数据随之改变。 <div id="app"> <input v-model="test"> <!-- <input :value="test" @input="test= $event.target.value"> --><!--语法糖--> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app', data: { test: '这是一个测试' } }); </script> |
|
上一篇: Vue.js 表单和双向数据绑定 | 下一篇: v-model指令(input)(双向数据绑定) |