1. v-model、@input 实现双向绑定数据
<template>
<div id="app">
<div>
<label>value、@input实现双向绑定数据：</label>
<input :value="v1" @input="event1">
<div>输入框中的值：{{ v1 }}</div>
</div>
<div>
<label>v-model实现双向绑定数据：</label>
<input v-model="v2">
<div>输入框中的值：{{ v2 }}</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
v1: '',
v2: '',
}
},
methods: {
event1(e) {
this.v1 = e.target.value
},
},
}
</script>
2. v-model 在组件中使用（简化代码：等价于@input方式）
- 在父组件中、使用 v-model 在子组件上绑定数据
<template>
<div id="app">
<div>
<vmodel v-model="v1"></vmodel>
<div>{{ v1 }}</div>
</div>
</div>
</template>
<script>
import vmodel from './components/vmodel.vue'
export default {
name: 'App',
components: {
vmodel,
},
data() {
return {
v1: 'v1',
}
},
methods: {
input(v) {
this.v1 = v
},
},
}
</script>
- 在子组件中，可当作父组件已绑定 :value 和 @input
<template>
<div>
<div @click="changeMe()">
点我
</div>
<div>{{ value }}</div>
</div>
</template>
<script>
export default {
name: 'vmodel',
props: {
value: {
type: [String],
default: '',
},
},
methods: {
changeMe() {
this.$emit('input', '改变了哦')
},
},
}
</script>
