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