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

泥地锚 · 4 小时前

前情

最近又接手一个全新多端项目，包括抖音/快手/微信/支付宝/安卓/ios，所选用的技术栈是uni-app，它是一个基于vue的多平台跨端框架，重要的是对前端开发友好，自带的IDE让开发体验也挺棒的
最近在开发设置页面，是一个列表页，产品初始想实现的效果如下图：

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

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

坑位

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

<template>
...
<view v-for="item in list" :key="item.label" @click="item.onClick">
<view >
{{ item.label }}
</view>
<view >
<text v-if="item.desc">{{ item.desc }}</text>
<image src="/static/qianzijinru.png" v-if="item.onClick" />
</view>
</view>
...
</template>

复制代码

上面代码是我一开始做法的关键代码，我的想法，通过判断当前数据项是否有方法来判断是否有交互，没有交互那就不显示右箭头，我于是特意把那没有交互的项的方法置为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" @click="item.onClick">
<view >
{{ item.label }}
</view>
<view >
<text v-if="item.desc">{{ item.desc }}</text>
<image src="/static/qianzijinru.png" v-if="item.onClick" />
</view>
</view>
...
</template>

复制代码

其实最稳的做法是新增一个标志变量用来判断是否要展示箭头，但是我觉得能少一些配置就少一些配置，所以就想直接通过onClick来判断了，如果是你，你会选择哪一种？
总结

uni-app虽然是基于Vue来的，绝大部分用法是可以直接照秒Vue用法来用的，部分用法uni-app可能有一些限制，这时就得多试多测找到另一种可行方案，虽然找到解决方案，但是并不理解为什么这样就可以，如果有知道的大佬，希望不吝留言分享，感谢
对于做技术的我们每天都是在踩坑的路上，但我真心希望所有人都一路生花，少踩坑，也坚信坑坑难爬，坑坑过

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册