前情
最近又接手一个全新多端项目，包括抖音/快手/微信/支付宝/安卓/ios，所选用的技术栈是uni-app，它是一个基于vue的多平台跨端框架，重要的是对前端开发友好，自带的IDE让开发体验也挺棒的
最近在开发设置页面，是一个列表页，产品初始想实现的效果如下图：
点击不同列表项可以跳转到不同页面查看内容，但是对于个别项上，就像下面的绑定的手机号，产品的意思是只是展示手机号即可，后面如果有需求了再考虑做修改手机号功能
我考虑到这里既然这里不可跳转，我觉得就没必要展示箭头了，不然容易误导用户点击，就向产品提了对于这种没操作的项去掉箭头，最终想实现的效果如下：
坑位
对于这种列表渲染，一般习惯使用v-for来渲染这种重复的列表结构，关键代码如下：
<template>...<view v-for="item in list" :key="item.label" class="flex flex-row items-center justify-between py-[56rpx] border-b-[1rpx] border-[#E2E1E7]" @click="item.onClick"><view class="text-[28rpx] leading-[1em] tracking-[4rpx]">{{ item.label }}</view><view class="flex flex-row items-center gap-[34rpx]"><text class="text-[#AEAAB3] text-[24rpx]" v-if="item.desc">{{ item.desc }}</text><image class="w-[34rpx] h-[34rpx]" src="/static/qianzijinru.png" v-if="item.onClick" /></view></view>...
</template><script setup>...const list = [{label: '用户协议',onClick: () => {const url = `${AGREEMENT_BASE_URL}/documents/user-agreement`uni.navigateTo({url: `/other/webview/webview?link=${encodeURIComponent(url)}`,})},},{label: '隐私协议',onClick: () => {const url = `${AGREEMENT_BASE_URL}/documents/user-privacy-agreement`uni.navigateTo({url: `/other/webview/webview?link=${encodeURIComponent(url)}`,})},},{label: '绑定手机号',desc: globalInstance?.userInfo?.account ? desensitizePhone(globalInstance?.userInfo?.account) : '未绑定',isLogin: true,onClick: null,},{label: '退出登录',isLogin: true,onClick: () => {console.log('---- 退出登录 ----:', globalInstance?.userInfo);logoutShow.value = true},},].filter((m) => {return m.isLogin ? globalInstance?.userInfo : true})...
</script>
上面代码是我一开始做法的关键代码，我的想法，通过判断当前数据项是否有方法来判断是否有交互，没有交互那就不显示右箭头，我于是特意把那没有交互的项的方法置为null,但是事情并像期望那样，这样一改所有列表项的箭头都没了，当时开始怀疑是不是vue框架有这个限制，同时也问了AI，豆包说有，文言一心说没有，此时就让我有点蒙了，于是通过Vue Playground写了小测试，结果验证是Vue框架是没有这个问题的
Why?
逛了uni-app的文挡没有找到相关的说明，逛了论坛找到一个19年的贴子，贴子里说uniapp的template里是不允许用函数的，贴子链接如下：uni-app v-if不能使用函数返回值作为判断条件 - DCloud问答，个人猜测应该是uni-app并不支付所有Vue的语法，存在部分的差异，看上面贴子说有文挡有介绍到，如果有知道文挡在哪里的，希望不吝分享，谢谢
解决方案
直接用函数做条件判断行不通，那我们直接判断它是否不等于null和undefined是否可行了，测试后是OK的，关键代码如下：
<template>...<view v-for="item in list" :key="item.label" class="flex flex-row items-center justify-between py-[56rpx] border-b-[1rpx] border-[#E2E1E7]" @click="item.onClick"><view class="text-[28rpx] leading-[1em] tracking-[4rpx]">{{ item.label }}</view><view class="flex flex-row items-center gap-[34rpx]"><text class="text-[#AEAAB3] text-[24rpx]" v-if="item.desc">{{ item.desc }}</text><image class="w-[34rpx] h-[34rpx]" src="/static/qianzijinru.png" v-if="![undefined, null].includes(item.onClick)" /></view></view>...
</template>
其实最稳的做法是新增一个标志变量用来判断是否要展示箭头，但是我觉得能少一些配置就少一些配置，所以就想直接通过onClick来判断了，如果是你，你会选择哪一种？
总结
uni-app虽然是基于Vue来的，绝大部分用法是可以直接照秒Vue用法来用的，部分用法uni-app可能有一些限制，这时就得多试多测找到另一种可行方案，虽然找到解决方案，但是并不理解为什么这样就可以，如果有知道的大佬，希望不吝留言分享，感谢
对于做技术的我们每天都是在踩坑的路上，但我真心希望所有人都一路生花，少踩坑，也坚信坑坑难爬，坑坑过
上)
