uni-app 条件渲染

1.if判断

了解过 java 的都应该知道 在java中也有 uni-app 的if判断和java的一样,就是前面多了一个

 ' v- ' 也就是  v-if  v-else-if 与v-else 

使用 if 判断的时候就是说,if 是判断条件是否满足,不满足则去 else-if 在继续判断条件,还不满足则进入else 中,在他们3个之间,不可以添加空格以外的任何字或者符号,加了就报错;

2.show判断

show与if判断类似,但是呢 在查看源码的时候,if不满足会被注释掉也就是说,上面的3个条件,两个都会被写成 <!-- v-if -->,而show 这回给他一个属性为  style='display:none;' 去隐藏掉他

这样的话,在使用图片的时候,if 的图片将不会消耗资源,而使用 show 的依旧会消耗资源,

图片都为显示出来了,但是 show 的依旧使用了资源;

对于二者的选择主要看各位的需求官网也给了对比大家可以看一下,对自己的需求所选择的比较好;

3.列表渲染 v-for 

 无数组-集合:标准格式为    <view v-for="(item,index) in 10":key="index">    </view>

item 中然后有数组或者集合时就是 map中的 key ,index就是下标, 10的话就是输出 10次,:key="index" key中需要放唯一值,因为下标都是唯一值所以存放 index

但在script中定义了数组或者集合时:

<view class="num2"  v-for="item in arryy" :key="item.id"></view>,在集合中一般都会设置 id 和数据库一样是唯一的arryy在in后面相当于变成了该数组的数量