表单输入绑定v-model
v-model 双向的数据绑定
双向数据流(绑定):
页面改变影响内存(js),内存(js)改变影响页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单输入绑定v-model</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<input type="text" v-model="msg">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'科比'
},
methods:{}
})
</script>
</body>
</html>
![image-20201215151416711](https://i-blog.csdnimg.cn/blog_migrate/ec696731e21f3fe7c583539a54ec89a3.png)
# 文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
# 多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
# 复选框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
# 多个复选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
# 单选按钮
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
# 选择框
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
# 多选时(绑定到一个数组)
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单输入绑定v-model</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<input type="text" v-model="msg">
<label for="checkbox">{{checked}}</label>
<input type="checkbox" id="checkbox" v-model="checked">
<div class="box">
<label for="a">黄瓜</label>
<input type="checkbox" id="a" value="黄瓜" v-model="checkedNames">
<label for="b">西红柿</label>
<input type="checkbox" id="b" value="西红柿" v-model="checkedNames">
<label for="c">芸豆</label>
<input type="checkbox" id="c" value="芸豆" v-model="checkedNames">
<br/>
<span>{{checkedNames}}</span>
</div>
<label>{{txt}}</label>
<input v-model.lazy="txt">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'科比',
txt:'',
checked:false,
checkedNames:[]
},
methods:{}
})
</script>
</body>
</html>
![image-20201215152930968](https://i-blog.csdnimg.cn/blog_migrate/7006f0e928e37cdafcc49e335add0fc9.png)
![image-20201215153154660](https://i-blog.csdnimg.cn/blog_migrate/75698d5f0a5d0b19771303b017d366fb.png)
v-bind和v-model的区别?
![image-20201215153331655](https://i-blog.csdnimg.cn/blog_migrate/94757a2ba539c80cfb4857ea4dde741e.png)