v-model使用computed实现动态绑定

vue版本：3.3.4

vue开发中，v-model双向绑定是常用的指令，但是在项目中，我是想通过if-else判断不同的条件下，绑定不同的值，那么直接v-model将无法实现，而且v-model不支持三元运算符了。

:disabled="typeof (item.disabled) === 'boolean' ? item.disabled : item.disabled?.value"

类似这样的三元运算绑定属性可以，但是在v-model上则实现不了。

翻阅了大量文档，最后还是官网给出了最合理的解释。官网说明连接。

关键字就是用computer属性来实现，我直接贴代码了。

<template>
    <MyCom v-model="myVModel"></MyCom>
</template>
<script lang="ts" setup>
import MyCom from './State.vue'
let value1 = true
let value2 = false

const now = Date.now() % 2
const myVModel = computed({
    get() {
        if (now === 0)
            return value1
        else
            return value2
    },
    set(value) {
        if (now === 0)
            value1 = value
        else
            value2 = value
    }
})
</script>

以上就是一个简单的例子，实际情况中，可以在if-else判断，返回不同的值。这样就能实现v-model动态绑定了。

最后我说说在我项目中的实际使用场景。我是在二次封装el-form组件是，因为form组件都需要v-model绑定。但是传入prop可能是字符串，也有可能是字符串数组，那么我就要根据不同参数类型绑定不同的值了。

以下是我项目中使用的代码：

const myVModel = computed({
    get() {
        if (typeof (props.formItem.prop) === 'string')
             return formModel[props.formItem.prop as string]
        else
            return formModel[props.formItem.prop[0]][props.formItem.prop[1]]
    },
    set(value) {
        if (typeof (props.formItem.prop) === 'string')
            formModel[props.formItem.prop as string] = value
        else
            formModel[props.formItem.prop[0]][props.formItem.prop[1]] = value
    }
})

至于二次封装elform的相关代码，等成熟后我也会给大家介绍，目前仍在研究中。