美文网首页
列表渲染

列表渲染

作者: 进击的码农设计师 | 来源:发表于2018-05-22 10:25 被阅读0次

在小程序的不同生命周期和不同的用户操作情况下,可能需要为用户展示和相应不同的内容,在这个时候,我们可以借助条件渲染来展示内容。

1、列表渲染:

1.1 控制单个组件的显示:

在组件上加入wx:if来控制组件的显示与隐藏。

  • 当wx:if对应的值为true时,对应组件会进行渲染
  • 当wx:if对应的值为false时,对应组件不会进行渲染
<view wx:if="{{condition}}"> True </view>

2、加入else属性:

  • wx:if:进行条件判断时,使用wx:if来进行初始的条件判断,可以单独出现
  • wx:elif:如果项目不止两个判断结果,使用wx:elif来辅助进行结果的输出
  • wx:else:如果需要进行多种条件判断结果,使用wx:else来辅助进行结果的输出
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

3、多个组件的显示控制:

使用辅助标签<block>对多个组件进行显示控制。

4、wx:ifhidden的区别:

  • wx:if:根据值来判断组件是否需要渲染进入界面。
  • hidden:始终会进行渲染,但是会根据其值决定是否在界面中显示。
  • 如果组件的显示切换频繁,就使用hidden,反之则使用wx:if

相关文章

  • 第七节:React列表渲染与数据收集

    1. 列表渲染 1.1 列表渲染说明: 列表渲染 先将列表数据转为React元素列表, 然后在渲染 React会将...

  • 第七节:React列表渲染与数据收集

    1. 列表渲染 1.1 列表渲染说明: 列表渲染 先将列表数据转为React元素列表, 然后在渲染 React会将...

  • art-template

    列表渲染 条件渲染

  • 列表渲染

    在小程序的不同生命周期和不同的用户操作情况下,可能需要为用户展示和相应不同的内容,在这个时候,我们可以借助条件渲染...

  • 列表渲染

    1. vm.items[indexOfItem] = newValue 2. vm.items.length =...

  • 列表渲染

    用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令...

  • 列表渲染

    1.v-for遍历数组 2.v-for遍历对象 v-for默认使用“就地复用”策略更新已渲染过的元素列表,为了跟踪...

  • 列表渲染

    基本用法 我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要以item in items形式的...

  • 列表渲染

    列表渲染适合于一些复用性比较高的元素关键词:v-for指令 有序列表ol和无序列表ul是天然可以适用这种情况的元素...

  • 列表渲染

    在 v-for 块中,我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。...

网友评论

      本文标题:列表渲染

      本文链接:https://www.haomeiwen.com/subject/llvqjftx.html