双向绑定 v-model
v-bind 实现了数据的单向绑定，将Vue实例中的数据同元素属性值进行绑定，接下来看一下Vue中的数据双向绑定 v-model。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model双向绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model的作用是：便捷的获取和设置表单元素的值（双向数据绑定，数据和表单的值） -->
<input type="button" value="修改Message" @click="setMessage">
<input type="text" v-model="message" @keyup.enter="getMessage">
<p v-text="message"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"马赫真帅",
msg:"123"
},
methods:{
setMessage:function(){
this.message="马赫太帅了"
},
getMessage:function(){
alert(this.message);
},
}
})
</script>
</body>
</html>v-model表单应用input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model表单应用input</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- v-model双向数据绑定 -->
<input type="text" v-model="msg"><span>{{msg}}</span>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"123" //默认为123
},
})
</script>
</body>
</html>v-model表单应用radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model表单应用radio</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!--注意: v-model 会忽略所有表单元素的value、checked、selected 特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的 data选项中声明初始值!-->
<div id="app">
<input type="radio" name="sex" value="男" v-model="message">男
<input type="radio" name="sex" value="女" v-model="message">女
<br>选中了：{{message}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"", //checked
},
})
</script>
</body>
</html>v-model表单应用select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model表单应用select</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--注意: v-model 会忽略所有表单元素的value、checked、selected 特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的 data选项中声明初始值!-->
<!--如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况 下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。-->
<select v-model="message">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>选中了：{{message}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"", //selected
},
})
</script>
</body>
</html>修饰符
v-model中还可以使用一些修饰符来实现某些功能：
v-model.lazy只有在input输入框发生一个blur时才触发，也就是延迟同步到失去焦点时。v-model.trim将用户输入的前后的空格去掉。v-model.number将用户输入的字符串转换成number。