Vue入门教程--v-model数据的双向绑定详解（article:5）

Vue.js 初步入门

---

属性介绍

v-model ：唯一一个可以实现双向数据绑定的属性

使用详解

1.v-model

原生js中，要是想将标签元素上嵌入自定义数据，必须增加一个data-*的属性来嵌入：

<button type="button" data-myData = "hello vue.js" onclick="handleBtn(this)">按钮</button>

function handleBtn(res){
	console.info(res.getAttribute("data-myData"));
};

而且这种数据嵌入方式是单向的，要想取回来也要调用DOM对象进行设置。
vue为我们提供了一种很方便的解决方案用来传递嵌入自定义数据，并且还是一种方式提供双向的数据绑定。

<input type="text" v-model="msg"/><br>
<p v-text="msg"></p>

msg:"hello vue.js"

v-model里面的数据关联到数据域中的msg，text文本框中的数据会被自动绑定为v-model里面的数据，同理，<p>标签里的值也会被自动绑定，一旦text文本框里的数据发生更改，msg里的值会被同步修改，自然p标签里的值也会被修改，这就是数据的双向绑定。

<button type="button" @click="handleBtn">按钮</button>

handleBtn(){
	console.info(this.msg);
}

修饰符

使用方法：

`v-model.xxx=`：xxx就是后面添加的修饰符。

.lazy：在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步。通俗的说，就是当你在输入框输入完成失焦之后，就可以立即执行change事件，就会同步到data中去。

.number：如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值。通俗的说，你想把输入的字符串进行转数字处理，加上这个修饰符后，就省去了自己手动转化的步骤。

.trim：如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入。

Tip

值得注意的是，v-model只能用在表单元素中（input、select、checkbox、textarea …），而且v-model的数据嵌入模式和v-text的模式有些许相同，但也有许多不同，如一个单向，一个双向，一个能作用到任何标签，一个只能作用到表单元素等。

---