v-model
是Vue中的指令,可以创建双向绑定。学习如何使用它。
v-model
指令可以创建双向绑定。
你可以绑定一个表单输入元素,当用户改变字段的内容时,可以实时改变Vue的数据属性:
<input v-model="message" placeholder="请输入消息">
<p>消息是:{{ message }}</p>
<select v-model="selected">
<option disabled value="">选择一种水果</option>
<option>苹果</option>
<option>香蕉</option>
<option>草莓</option>
</select>
<span>选择的水果:{{ selected }}</span>
常用的指令修饰符
如果只想在发生更改事件时更新模型,而不是在用户按下键时更新,可以使用v-model.lazy
代替v-model
。
当使用输入字段时,v-model.trim
非常有用,因为它会自动去除输入内容的空格。
如果要接受数字而不是字符串,请确保使用v-model.number
。
嵌套属性
假设你有一个购物车,并且有一个包含添加产品表单的组件:
<template>
<div>
<h1>添加产品</h1>
<label>名称</label>: <input>
<label>描述</label>: <textarea></textarea>
<button @click="addProduct">添加</button>
</div>
</template>
<script>
export default {
name: 'AddProduct',
data() {
return {
product: {
name: '',
description: ''
}
}
},
methods: {
addProduct() {
console.log(this.product)
}
}
}
</script>
为了使表单更新product
状态值的内部属性,你可以使用product.*
:
<label>名称</label>: <input v-model="product.name">
<label>描述</label>: <textarea v-model="product.description"></textarea>