无法通过数组长度变化绑定v-show,v-if,:class,:style等逻辑判断,无法监听到数组的变化
无法通过数组长度变化绑定v-show,v-if,:class,:style等逻辑判断,无法监听到数组的变化
在使用uniapp进行开发时,当我想要用数组的长度控制元素的隐藏时,并且通过动态改变数组内容了,
结果是页面还是没有显示元素!
场景复现:数组长度和内容已经发生变化,但是页面无变化,没有显示
<view class="label_box" v-show="historytags.length!=0">
你好呀
</view>
data() {
return {
historytags: []//初始化默认的历史搜索记录
}
},
// 页面创建的时候调用
created() {
// 必须拷贝下this
var self = this
console.log("历史标签缓存读取")
// 将缓存数据读取出来并赋值
uni.getStorage({
key: 'historytags',
success: function (res) {
self.historytags=res.data
}
});
},
解决方案:
有两种曲线办法
1: 使用Number() 把list.length 包裹起来, 这样可以正常使用
2: 使用计算属性 也可以正常使用
方案1:
<view class="label_box" v-show="Number(historytags.length)!=0">
你好呀
</view>
方案2:
computed: {
historytagslength(){
return this.historytags.length
}
},
</view><view class="label_box" v-show="historytagslength!=0">
你好呀
</view>