語法格式
語法格式：
v-model="vue_instance_attr"
//value會自動把輸入值賦值給vue實例的attr字段。
使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue穩(wěn)定版本-->
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<!--input輸入框-->
<div id="app">
<input type="text" v-model="message" placeholder="請輸入">
<p>輸入的內(nèi)容是: {{message}}</p>
</div>
<script>
var vue=new Vue({
el:'#app',
data:{
message:''
}
});
</script>
</body>
</html>
運行結(jié)果：
v-model基本使用
如何理解v-model指令
v-model指令的本質(zhì)是： 它負(fù)責(zé)監(jiān)聽用戶的輸入事件，從而更新數(shù)據(jù)，并對一些極端場景進(jìn)行一些特殊處理。同時，v-model會忽略所有表單元素的value、checked、selected特性的初始值，它總是將vue實例中的數(shù)據(jù)作為數(shù)據(jù)來源。 然后當(dāng)輸入事件發(fā)生時，實時更新vue實例中的數(shù)據(jù)。
實現(xiàn)原理
<input v-bind:value="message" v-on:input="message = $event.target.value" /> //把input輸入框的value屬性值和vue實例的message屬性進(jìn)行綁定，同時監(jiān)聽輸入事件。
用v-bind和v-on指令實現(xiàn)v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue穩(wěn)定版本-->
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<!--input輸入框-->
<div id="app">
<!--把message字段的值作為input標(biāo)簽的value屬性值，同時監(jiān)聽輸入事件，實時更新message的值-->
<input type="text" @input="handleInput($event)" placeholder="請輸入" v-bind:value="message">
<p>輸入的內(nèi)容是: {{message}}</p>
</div>
<script>
var vue=new Vue({
el:'#app',
data:{
message:''
},
methods:{
handleInput: function (event) {
console.info("控制臺打印event詳情")
console.info(event)
console.info(event.toLocaleString());
this.message=event.target.value;
}
}
});
</script>
</body>
</html>
運行結(jié)果：
v-bind和v-on實現(xiàn)v-model指令
