uni-app中v-if使用”异常”

转载于 2025-09-16 14:30:15 发布 · 30 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/xwwin/p/19094649

文章标签：

#it

前情

最近又接手一个全新多端项目，包括抖音/快手/微信/支付宝/安卓/ios，所选用的技术栈是uni-app，它是一个基于vue的多平台跨端框架，重要的是对前端开发友好，自带的IDE让开发体验也挺棒的

最近在开发设置页面，是一个列表页，产品初始想实现的效果如下图：

110ced3b-34f0-49dc-abeb-52a497b77d10

点击不同列表项可以跳转到不同页面查看内容，但是对于个别项上，就像下面的绑定的手机号，产品的意思是只是展示手机号即可，后面如果有需求了再考虑做修改手机号功能

我考虑到这里既然这里不可跳转，我觉得就没必要展示箭头了，不然容易误导用户点击，就向产品提了对于这种没操作的项去掉箭头，最终想实现的效果如下：

b7447db6-fedd-4d60-994e-e7b753a7cb5c

坑位

对于这种列表渲染，一般习惯使用v-for来渲染这种重复的列表结构，关键代码如下：

/* by 01130.hk - online tools website : 01130.hk/zh/refresh.html */
<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的，关键代码如下：

/* by 01130.hk - online tools website : 01130.hk/zh/refresh.html */
<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可能有一些限制，这时就得多试多测找到另一种可行方案，虽然找到解决方案，但是并不理解为什么这样就可以，如果有知道的大佬，希望不吝留言分享，感谢

对于做技术的我们每天都是在踩坑的路上，但我真心希望所有人都一路生花，少踩坑，也坚信坑坑难爬，坑坑过

好好学习！天天向上！