v-model不指定名字只能有一个，指定名字可以任意个

不指定名字的v-model,多个值传递只能有一个model剩下的使用v-bind

<script>
    const app = Vue.createApp({
        data() {
            return { 
                count : 1,
                num : 1,
            }
        },
        methods:{
            handleChangeNum(n){
                this.num = n;
            }
        },
        template : `
            <counter 
            v-model="count" 
            :num="num" 
            @change-num="handleChangeNum"
            />
        `

    });

    app.component('counter',{
        props: ['modelValue','num'], // 当 v-model="count"是固定为 modelValue 表示v-model对应双向绑定的数据
        methods: {
            handleItemClick(){
                this.$emit('update:modelValue',this.modelValue + 3); //触发事件名称规定update:变量名/modelValue
            },
            handleItemClick1(){
                this.$emit('changeNum',this.num + 1); //@change-num="handleChangeNum" 触发事件名称规定update:变量名/modelValue
            }
        },
        template : `
            <div @click="handleItemClick"> 请点击 {{ modelValue }} </div>
            <div @click="handleItemClick1"> 请点击 {{ num }} </div>
        `
    });
    const vm = app.mount('#root');
</script>

指定名字 多个v-model

<script>
    const app = Vue.createApp({
        data() {
            return { 
                count : 1,
                num : 1,
            }
        },
        template : `
            <counter  v-model:count="count" v-model:num="num" />
        `
    });

    app.component('counter',{
        props: ['count','num'], // 当 v-model="count"是固定为 modelValue 表示v-model对应双向绑定的数据
        methods: {
            handleItemClick(){
                this.$emit('update:count',this.count + 3); //触发事件名称规定update:变量名/modelValue
            },
            handleItemClick1(){
                this.$emit('update:num',this.num + 1); 
            }
        },
        template : `
            <div @click="handleItemClick"> 请点击 {{ count }} </div>
            <div @click="handleItemClick1"> 请点击 {{ num }} </div>
        `
    });
    const vm = app.mount('#root');
</script>

v-model.修饰符="变量名"

<script>
    const app = Vue.createApp({
        data() {
            return { 
                count : 'a',
            }
        },
        template : `
            <counter  v-model.uppercase="count"/>
        `
    });

    app.component('counter',{
        // props: ['count','num'], // 当 v-model="count"是固定为 modelValue 表示v-model对应双向绑定的数据
        props: {
            'modelValue' : String,
            'modelModifiers' : { //修饰符
                default : () =>({})
            }
        },
        methods: {
            handleItemClick(){
                // this.$emit('update:count',this.count + 3); //触发事件名称规定update:变量名/modelValue
                let newValue = this.modelValue + 'b';
                if(this.modelModifiers.uppercase){
                    newValue = newValue.toUpperCase()
                }
                this.$emit('update:modelValue',newValue); //触发事件名称规定update:变量名/modelValue
            },
        },
        template : `
            <div @click="handleItemClick"> 请点击 {{ modelValue }} </div>
        `
    });
    const vm = app.mount('#root');
</script>