Vue填坑（v-model和:model）

End_less__

于 2020-03-21 14:31:03 发布

阅读量1.2k

点赞数

分类专栏： Vue.js学习 Vue项目实践

本文链接：https://blog.youkuaiyun.com/Ms_yjk/article/details/105009488

版权

Vue.js学习同时被 2 个专栏收录

22 篇文章

订阅专栏

Vue项目实践

14 篇文章

订阅专栏

在Vue开发中，v-model是用于实现数据双向绑定的关键指令。当遇到input输入框无法正常输入的问题，可能是因为误用了:model。v-model是双向绑定的，而:model仅单向传递数据。即使对于引用类型的值，子组件修改后，父组件也会受到影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用input进行输入的时候，在vue中最好使用v-model进行数据的双向绑定。

例如：

<el-input v-model="input" placeholder="请输入内容"></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

今天遇到的小问题，当我使用:model进行数据绑定的时候，在输入框中无法输入内容。

我原本代码：

<el-input :model="searchInfo" placeholder="搜索内容">
    <i slot="suffix" class="el-input__icon el-icon-search" @click="onEnterSearch"></i>
</el-input>

更改之后：

<el-input v-model="searchInfo" placeholder="搜索内容">
     <i slot="suffix" class="el-input__icon el-icon-search" @click="onEnterSearch"></i>
</el-input>

Note:
:model和v-model的区别
:model是v-bind:model的缩写,这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。