vue3中v-model的使⽤
在vue2中v-model使⽤的还是挺多的，不过呢，这个指令⼀般是⽤在了输⼊框中，并且这个指令其实就是个语法糖
<input type="text" />data </input>
其实这个就是语法糖，真实的写法是
<input type="text" />data</input>
看到了吗，其实这个就和我们普通的定义组件上的数据，然后获取数据其实是⼀样的，感觉⽐较⾼级，很多弹窗⾥⾯会这么来写，
之前对这边官⽅描述理解的不深，感觉没啥⽤，现在有点感觉了。
郑州海马汽车厂
现在vue3中，这⾥写法改了。
看下⾯的代码，其实就是把之前的value改成了modelValue，把接收的input事件改成了update:modelValue，并且呢，考虑到modelValue意义不是很明确，可以使⽤v-model:title='title'这种⽅式来明确具体的字段名，这样⼦，在⼦组件⾥⾯就可以直接使⽤title这个字段了。
⽗组件
<VmodalTest v-model:show="show" v-show="show"></VmodalTest>
⼦组件
<template>
<div class="vmodal-test">
<p>vmodal test{{show}}</p>
<button @click="$emit('update:show',false)">按钮啊</button>
</div>
</template>
<script>
export default {
name: 'VmodalTest',森雅s80油耗
props: {
show: {
type: Boolean
}
}
}
</script>
<style scoped>
</style>
下⾯有⼀篇⽂章写的很详细，我也是看了这篇⽂章才感觉看懂了。
⽂档⾥⾯还有多各v-model的，这就跟多个属性⼀个意思，贴⼀下官放⽂档⾥⾯的例⼦
<user-name
v-model:first-name="firstName"高速免费有哪些节日
v-model:last-name="lastName"
></user-name>
const app = ateApp({})
appponent('user-name', {
props: {
firstName: String,
lastName: String
},
template: `
汽车指甲
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)">
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)">
`
})
新帕萨特和新迈腾哪个好
v-model除了参数还有修饰符，之前有trim,number之类的系统⾃带的，现在可以⾃定义了，基本写法就是im='xxx'
现在如果加上参数的话，就这么写，v-model:title.catimize='data'
然后⼦组件⾥⾯呢，在props⾥⾯有了⼀个modelModifiers的对象，⽤来接收这些⾃定义的修饰符，有参数的话，名字就边了，叫'arg'+modifiers了
举个官⽅例⼦把：
车险便宜看到没有，变成fooModifiers了
<my-component v-model:foo.capitalize="bar"></my-component>
appponent('my-component', {
props: ['foo', 'fooModifiers'],
template: `
<input type="text"
:value="foo"
@input="$emit('update:foo', $event.target.value)">
`,
created() {
console.log(this.fooModifiers) // { capitalize: true }
}
})