简述vue的双向数据绑定步骤（Vue入门系列六v-model）
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 实现双线数据绑定的意思是 不论你是从数据层还是视图层去改变这个值 视图和数据层的数据会同时发生改变.
- 当你在input框里改变hello值的时候,它绑定的msg会自动发生变化.(视图层-->数据层)
- 页面初始化的时候 设置msg=hello 而hello会自动显示在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" > -->
<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
页面输出
当我们改变下拉选项的时候 下面选择的结果也会对应发生变化
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
