1.v-model介绍
v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数 据绑定。v-model实际上是语法糖，是一种简便写法。
2.用例剖析
//触发oninput事件 value
<input v-model="username" />
<input :value="username" @input="username=$event.target.value" />
//触发onchanged事件 checked
<input type=checkbox :checked="signal" @change="signal=$event.target.checked" />
//iview Checkbox 组件 基于 vuex 状态管理
<Checkbox v-model="!$store.state.sortAsc" @on-change="sortChange($event.target.checked)">倒序排列</Checkbox>
methods:{
noteSortChange (checked) {
this.$store.commit('vSortDesc', checked)
}
}
const mutations = {
vSortDesc: (state, payload) => {
state.sortAsc = payload
}
}
3.官方案例
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
Example:
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上述代码相当于：
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
注:总结常规的使用及说明，后续会不断更新，如有疑问见解多多交流
