vue里面的v-model指令是用来给表单元素绑定数据的,与v-bind的区别是,v-model只能作用于表单元素,v-bind绑定表单元素会失效,具体用法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单输入绑定</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="vuediv">
<!-- v-model实现数据的双向绑定 -->
<input type="button" value="-" v-on:click="sub()"></input>
<input type="text" v-model="count" placeholder="请输入" v-on:keydown="keyEvent($event)"></input>
<input type="button" value="+" v-on:click="add()"></input>
</div>
</body>
<script>
var vm=new Vue({
el:"#vuediv",
data:{
count:1
},
methods: {
sub:function(){
this.count-=1
},
add:function(){
this.count+=1
},
keyEvent:function(event){
if(!(event.key>='0'&&event.key<='9'||event.key=='backapace')){
event.preventDefault;
}
this.count=parseInt(this.count);
}
},
})
</script>
</html>