我这头像像骷髅
我这头像像骷髅
  • 发布:2020-08-31 15:47
  • 更新:2020-12-21 16:43
  • 阅读:1108

【报Bug】v-show 判断大小失效,v-if 则不会(判断手动增加变量的大小,微信小程序bug,H5正常,其他平台未测试)

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win7 旗舰版

HBuilderX类型: 正式

HBuilderX版本号: 2.8.8

第三方开发者工具版本号: 1.03.2006091

基础库版本号: 2.12.2

项目创建方式: HBuilderX

示例代码:
    <!-- 业务代码修改后的例子 -->  
    <view v-for="(item, index) in array" :key="index">  
        <input v-model="array[index]" placeholder="请输入内容" />  
        <view v-if="index != 0" @tap="del(index)">删除</view>  
    </view>  
    <view @tap="add">添加</view>  

    <text v-if="array.length == 3">if</text>---  
    <text v-show="array.length == 3">show</text>---  
    <text>长度:{{array.length}}</text>
    export default {  
        data() {  
            return {  
                array: ['']  
            }  
        },  
        methods: {  
            add: function() {  
                if (this.array.length < 5) {  
                    this.array.push('')  
                }  
            },  
            del: function(index) {  
                this.array.splice(index, 1)  
            },  
        }  
    }

操作步骤:

长度为 3 的情况下, if 和 show 显示
1、默认一个输入框,长度:1,if 不显示,show不显示
2、点击添加,两个输入框,长度:2,if 不显示,show不显示
3、点击添加,三个输入框,长度:3,if 显示,show不显示 (?问号脸)
4、点击添加,四个输入框,长度:4,if 不显示,show不显示
5、点击删除,三个输入框,长度:3,if 显示,show显示
(分情况 6 和 7)
6、若点击添加,四个输入框,长度:4,if 不显示,show显示 (?问号脸)
7、若点击删除,两个输入框,长度:2,if 不显示,show不显示

预期结果:

点击添加或删除使 array 的长度为 3 时,显示 if 和 show 字样,其他长度不显示

实际结果:

点击添加使 array 的长度为 3 时,显示 if 字样,没显示 show 字样,长度为 4 点击删除时,if 和 show 都会显示,(分情况 1 和 2)1、如果点击删除,两个都消失。2、如果点击添加,则 show 字样显示,if 字样消失。

bug描述:

想做一个可添加多个的文本输入的功能,类似于之前的微信公众平台小程序的域名配置。
最多能添加4个,默认1个,共计5个,在添加4个之后,隐藏添加按钮,想用 v-show 隐藏,结果发现该bug。
H5反应正常,微信小程序在添加的时候有问题,其他平台未测试。


然后做了个测试 v-if 和 v-show 的对比
(第一次发,不知道怎么插图片 - . -)

2020-08-31 15:47 负责人:无 分享
已邀请:
我这头像像骷髅

我这头像像骷髅 (作者) - 一个资深的前端HTML网页复制架构师

这是要沉了吗 = 。=

3***@qq.com

3***@qq.com

用v-show控制组件,有时会失效,但是后来改成:class就可以了
请问楼主是怎么解决的?

该问题目前已经被锁定, 无法添加新回复