位置:电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > 基础用法
阅读(22555525)      收藏       赞(5685)      分享
上一篇: Vue.js 表单和双向数据绑定 下一篇: v-model指令(input)(双向数据绑定)

v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 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)(双向数据绑定)
毕业设计网             广告联系QQ:45157718(微信同号)