<input :value="value" @input="updateValue" placeholder="edit me">
@input是input框中的值变化时触发的函数。
以下示例是:input内容变化时,下面的内容也跟着变化。
<div id="app">
<com v-model="message"></com>
<p>Message is: {{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
},
components: {
com: {
props: ['value'],
template: '<input :value="value" @input="updateValue" placeholder="edit me">',
methods: {
updateValue: function (e) {
this.$emit('input', e.target.value);
}
}
}
},
methods: {
}
})
</script>
效果为: