- 双向绑定 v-model
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<input v-model="message" placeholder="edit me" />
<p>您输入的内容为：{{ message }}</p>
</div>
<script type="text/javascript">
var vm =new Vue({
el: '#vm',
data:{
message: ""
}
});
</script>
</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<div id="app">
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<p style="white-space: pre-line;">{{ message }}</p>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vm',
data:{
message: ""
}
});
</script>
</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<div style="margin-top: 20px;">
<input type="checkbox" id="a" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="b" value="Rose" v-model="checkedNames">
<label for="jack">Rose</label>
<br>
<span>你选中了: {{checkedNames}}</span>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vm',
data:{
checkedNames: []
}
});
</script>
</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<div style="margin-top: 20px;">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>picked: {{picked}}</span>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vm',
data:{
picked: ''
}
});
</script>
</body>
</html>
提交表单获取数据的函数
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<input v-model="message" placeholder="edit me" />
<button type="button" @click="submit">提交</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vm',
data:{
message: ""
},
methods:{
submit: function(){
console.log(this.message);
}
}
});
</script>
</body>
</html>
通过变量收集数据
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<input v-model="message_1" placeholder="edit me" />
<br>
<input v-model="message_2" placeholder="edit me" />
<button type="button" @click="submit">提交</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vm',
data:{
message_1: "",
message_2: ""
},
methods:{
submit: function(){
var postObj = {
msg1: this.message_1,
msg2: this.message_2
};
console.log(postObj);
}
}
});
</script>
</body>
</html>
