<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单与v-model基本用法</title>
</head>
<body>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<!--v-model 指令对数据的双向绑定-->
<div id="app">
<input type="text" v-model="message" placeholder="输入...">
<p>输入的内容是：{{ message }}</p>
</div>
<!--同样适用于文本域-->
<div id="app2">
<textarea v-model="text" placeholder="输入..."></textarea>
<p>输入的内容是：</p>
<p style="white-space: pre">{{ text }}</p>
</div>
<!--使用v-model后，表单控件显示的值只依赖所绑定的数据，不在关系初始化时的属性
，对于在<textarea></textarea> 之间插入的值，也不会生效。使用v-model时，如果是
用中文输入法输入中文，一般在么有选定词组前，也就是在拼音阶段，Vue是不会更新数
据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以用@input来替代v-model
。事实上，v-model 也是一个特殊的语法糖，只不过它会在不同的表单上智能处理，例如：-->
<div id="app3">
<input type="text" @input="handleInput" placeholder="输入...">
<p>输入的内容是：{{ message }}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>
<script>
var app = new Vue({
el:'#app2',
data:{
text:''
}
})
</script>
<script>
var app = new Vue({
el:'#app3',
data:{
message:''
},
methods:{
handleInput:function(e){
this.message = e.target.value;
}
}
})
</script>
</body>
</html>
表单与v-model基本用法.png
网友评论