v-model可以轻松的实现用户输入与状态的双向绑定
Vue创建一个msg数据
const app = new Vue({
el: '#app',
data:{
msg:"我是一段文字"
}
})
在html中创建一个input
<input v-model="msg" type="text" placeholder />
使用了v-model将msg进行了绑定
并在下方创建一个div用来显示msg内容
<div class="title">{{msg}}</div>
完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model测试</title>
<style type="text/css">
input{
outline: none;
padding: 10px;
margin-bottom: 20px;
width: 400px;
}
.title{
border: none;
box-shadow: 0 0 2px 2px #DDDDDD;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<h1 >测试v-model</h1>
<input v-model="msg" type="text" placeholder />
<div class="title">{{msg}}</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
msg:"我是一段文字"
}
})
</script>
</body>
</html>
页面显示效果
这时候，在输入框输入文字，将会看到，输入的内容实时显示在了下方，这就是双向绑定。
利用v-model 可以轻松的实现。
