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

 0 0条评论

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的相关代码,等成熟后我也会给大家介绍,目前仍在研究中。

本文作者:双黑

版权声明:本站文章欢迎链接分享,禁止全文转载!

游客