<div id="app">
<my-component v-model.capitalize="message"></my-component>
{{ message }}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: ''
}
}
});
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
methods: {
emitValue(e) {
let value = e.target.value
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
this.$emit('update:modelValue', value)
}
},
template: `
<div>
<input
type="text"
:value="modelValue"
@input="emitValue">
</div>
`
});
app.mount('#app')
</script>
message也能出来
为什么modelValue也可以,都可以啊?
这两个是相等吗?
<div id="app">
<my-component v-model.capitalize="message"></my-component>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: ''
}
}
});
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
methods: {
emitValue(e) {
let value = e.target.value
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
this.$emit('update:modelValue', value)
}
},
template: `
<div>
<input
type="text"
:value="modelValue"
@input="emitValue">
<label> {{ modelValue }}</label>
</div>
`
});
app.mount('#app')
</script>
attrs
update:modelValue(message=$event)
attrs代表什么?
props
modelModifiers: object
capitalize:true
modelValue:“fffffff”
default函数,就是capitalize函数吗?
应该是的