Vue——使用v-bind与v-on实现v-model双向绑定
2022-12-10 11:48:13
###1.v-bind绑定一个value属性,显示数据
```
<template>
<input type="text" :value='number'>
</template>
<script>
export default{
data:function(){
return{
number:0,
}
}
}
</script>
```
###2.v-on指令给当前元素绑定input事件，改变数据
```
<template>
<input type="text" @input='valueChange'>
</template>
<script>
export default{
data:function(){
return{
number:0,
}
},
methods:{
valueChange(event){
this.number = event.target.value;
}
}
}
</script>
```
###3.实现双向绑定
```
<template>
<input type="text" :value="number" @input='valueChange'>
</template>
<script>
export default{
data:function(){
return{
number:0,
}
},
methods:{
valueChange(event){
this.number = event.target.value;
}
}
}
</script>
```
###4.或者更简洁的绑定
```
<template>
<input type="text" :value="number" @input='number = $event.target.value'>
</template>
<script>
export default{
data:function(){
return{
number:0,
}
},
}
</script>
```