<template>
<div>
value: {{ obj.c }}
<my-input v-model="obj.c"/>
<my-input :value="obj.c" @change="(val) => (obj.c = val)"/>
</div>
<template>
<script>
export default {
data(){
return {
obj: {}
}
}
}
</script>
my-input is a customer component. v-model will update the View, but the other will not.
These two methods are inequivalence ?
What else did the 'v-model' do ?
v-model is a two-way data binding attribute for form inputs and :value is a one-way data binding attribute which binds a JavaScript value into the template and to update the value we can use v-on:input in addition to :value.
Demo :
new Vue({
el: '#app',
data: {
vModelMessage: 'Hello Vue.js!',
valueMessage: 'Hello Vue.js!'
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="vModelMessage"/>
{{ vModelMessage }}
<br><br>
<input type="text" :value="valueMessage" v-on:input="valueMessage = $event.target.value"/>
{{ valueMessage }}
</div>