Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，
比如，在数据框上使用时，输入的内容会实时映射到绑定的数据上。
<div id="app">
<input type="text" v-model="message" placeholder="输入你的内容">
<p>输入的内容是：{{message}}</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>
对于文本域textarea也是同样的用法：
<div id="app1">
<textarea v-model="text" placeholder="请输入你的内容"></textarea>
<p>输入的内容是：</p>
<p style="white-space:pre">{{text}}</p>
</div>
var app1 = new Vue({
el:'#app1',
data:{
text:''
}
})
完整代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Vue V-model实现双向绑定的基本用法</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message" placeholder="输入你的内容">
<p>输入的内容是：{{message}}</p>
</div>
<div id="app1">
<textarea v-model="text" placeholder="请输入你的内容"></textarea>
<p>输入的内容是：</p>
<p style="white-space:pre">{{text}}</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
})
var app1 = new Vue({
el:'#app1',
data:{
text:''
}
})
</script>
</body>
</html>