vue使用v-model實現這些标簽數據的雙向綁定，它會根據控件類型自動選取正确的方法來更新元素。
v-model 之 input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./asset/vue.js"></script>
<title>Vuejs</title>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="msg" >
</div>
<div>
<p>{{ msg }}</p>
</div>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
msg:"hello"
},
methods:{
}
})
</script>
</html>
Vue入門系列：六 v-model 雙向數據綁定 input
頁面輸出
Vue入門系列：六 v-model 雙向數據綁定
解析:
v-model 實現雙線數據綁定的意思是 不論你是從數據層還是視圖層去改變這個值 視圖和數據層的數據會同時發生改變.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./asset/vue.js"></script>
<title>Vuejs</title>
</head>
<body>
<div id="app">
<div>
<!-- <input type="text" v-model="msg" > -->
<textarea v-model="msg" id="" cols="30" rows="10"></textarea>
</div>
<div>
<p>{{ msg }}</p>
</div>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
msg:"hello"
},
methods:{
}
})
</script>
</html>
Vue入門系列：六 v-model 雙向數據綁定 textarea
Vue入門系列：六 v-model 雙向數據綁定
動态改變文本域裡面的數據 下面也會一起發生變化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./asset/vue.js"></script>
<title>Vuejs</title>
</head>
<body>
<div id="app">
<div>
<!-- <input type="text" v-model="msg" > -->
<!-- <textarea v-model="msg" id="" cols="30" rows="10"></textarea> -->
<select v-model="msg" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>
<p>{{ msg }}</p>
</div>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
msg:"2"
},
methods:{
}
})
</script>
Vue入門系列：六 v-model 雙向數據綁定 select
頁面輸出
當我們改變下拉選項的時候 下面選擇的結果也會對應發生變化
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
