v-model设置model
时间: 2023-11-01 13:56:10 浏览: 42
在Vue.js中,可以使用v-model指令来实现双向数据绑定,将表单输入与组件的数据模型进行绑定。
首先,在Vue组件的template中,可以使用v-model指令将输入框与组件的数据模型进行绑定,如下所示:
```html
<template>
<div>
<input type="text" v-model="myModel">
<p>输入的值为:{{ myModel }}</p>
</div>
</template>
```
在上述例子中,`v-model="myModel"` 将输入框与组件的 `myModel` 数据模型进行绑定。当输入框的值发生变化时,`myModel` 的值也会随之更新。
此外,你还可以使用v-model指令与自定义组件一起使用。在自定义组件中,你可以通过`props`属性接收传递的值,并在组件中使用`$emit`方法触发事件来实现双向绑定。例如:
```html
<template>
<div>
<custom-input v-model="myModel"></custom-input>
<p>输入的值为:{{ myModel }}</p>
</div>
</template>
```
在上述例子中,`v-model="myModel"`将父组件中的 `myModel` 数据模型传递给子组件 `custom-input`。子组件可以通过 `props` 接收该值,并使用 `this.$emit('input', newValue)` 来触发事件,从而更新父组件中的 `myModel`。
总结来说,`v-model` 可以在Vue.js中实现简单且方便的双向数据绑定。它适用于原生的输入框以及自定义的组件。