uni-app v-if 在微信小程序中表现错误，当函数返回三个true时条件不成立，h5无问题。

uni-app v-if 在微信小程序中表现错误，当函数返回三个true时条件不成立，h5无问题。

示例代码：

<template v-if="one() && two() && three()">
    哈哈哈
</template>

methods: {  
    one() {  
        return true;  
    },  
    two() {  
        return true;  
    },  
    three() {  
        return true;  
    }  
}

操作步骤：

新建uniapp项目，将上述代码粘贴到页面中即可复现。

预期结果：

这个条件应该是成立的

实际结果：

在微信小程序中，这个条件不成立，判断里的内容不显示。

bug描述：

在微信小程序中无法显示条件判断中的内容，说明条件未成立。H5中就会显示内容。

信息类别 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
操作系统版本 win10
HBuilderX类型 正式
HBuilderX版本 3.2.16
开发工具版本 1.05.2106250
基础库版本 2.21.1
项目创建方式 HBuilderX

Image Image


更多关于uni-app v-if 在微信小程序中表现错误，当函数返回三个true时条件不成立，h5无问题。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

奇怪的是，两个条件的时候，这个就又显示了。 <template v-if="one() && two()">
哈哈哈
</template> 这样就显示了。这是什么情况？
这是编译到微信小程序的样子：
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area"><text class="title">{{title}}</text></view>
<block wx:if="{{$root.m1}}">哈哈哈</block>
</view>

更多关于uni-app v-if 在微信小程序中表现错误，当函数返回三个true时条件不成立，h5无问题。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


其实这种语法不是很推荐，用computed 他不香么？

这个问题是由于微信小程序平台对模板表达式的处理机制与H5不同导致的。在微信小程序中，模板表达式中的函数调用会受到限制。

原因分析： 微信小程序的模板编译机制在处理复杂表达式时，特别是多个函数调用组合的逻辑运算，可能会出现解析异常。虽然每个函数都返回true，但整个表达式在小程序环境中可能被错误地评估为false。

解决方案：

  1. 推荐方案：使用计算属性
<template v-if="shouldShow">
    哈哈哈
</template>

computed: {
    shouldShow() {
        return this.one() && this.two() && this.three();
    }
},
methods: {  
    one() { return true; },  
    two() { return true; },  
    three() { return true; }  
}
  1. 备选方案：使用变量缓存结果
data() {
    return {
        conditionResult: false
    };
},
mounted() {
    this.conditionResult = this.one() && this.two() && this.three();
}
回到顶部