微信小程序开发,视图层数据绑定与条件渲染说明

2018/4/25 17:07:17
摘要: 在开发微信小程序的过程中,视图层的数据绑定有几种情况需要注意,在进行条件渲染的时候,也要先了解一下参数属性

在开发微信小程序的过程中,视图层的数据绑定有几种情况需要注意,在进行条件渲染的时候,也要先了解一下参数属性,针对这两个方面的要求,小编就整理了一下视图层的数据绑定与条件渲染的说明文档,具体内容如下。

一、数据绑定说明

1、普通绑定

<view>{{name}}</view>

2、组件属性绑定

组件属性的绑定,必须使用引号,在js改变index值的时,页面会自动刷新最新值。

<view id="item-{{index}}"></view>

3、控制属性绑定

  控制属性的绑定即属性值是需要通过满足一定条件达到目的,此外,它还可以是条件表达式或者运算表达式、多级条件判断。示例如下:

(1)属性满足一定条件来达到目的:<view wx:if="{{condition}}"></view>

(2)条件表达式或运算表达式:<view hidden="{{flag ? true : false}}"></view>

(3)多级条件判断:if ... elif ... else

4、<block>块标签的使用

使用<block>块标签后,可以使用条件判断从而控制多个组件,不过<block>块标签只会起到分组作用,并不会被真的渲染出来。

5、使用条件来控制view时,与hidden属性的比较

(1)view的条件判断,会在条件中的值发生变化的时先销毁原先的,然后在满足条件的时候进行重新渲染和销毁。

(2)hidden属性控制view的显示和隐藏,这个属性的组件始终会被渲染,不过可以在需要的时候控制它的隐藏和显示。

(3)当开发者在需要频繁切换的情况下,建议用hidden属性控制,而如果在绑定的数据基本不变的情况下,建议使用wx:if条件来控制。

二、列表渲染说明

  1、列表渲染wx:for:可以同时生成多个元素

  2、参数属性说明

 (1)wx:key="unique...":指定组件的唯一标识,列表发生变化需要保持自身的状态和特征不发生变化,并且能在重新渲染的时候,重新排序。

 (2)wx:key="*this":此参数的功能属性同上,不同的是,这个参数要求项目中的item本身是唯一的,即需要用到的属性值是唯一的。

 (3)wx:for-index="index":指定循环的下标变量名,默认:index。

 (4)wx:for-item="item": 指定当前项变量名,默认:item。

声明:文章"微信小程序开发,视图层数据绑定与条件渲染说明"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序开发文档
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 初次创业者做微信小程序开发时需要注意什么

    初次创业者在做小程序开发时,一些关乎于成本、发展前景的问题就需要去着重注意,毕竟对于一个刚刚

  • 微信小程序升级用户信息会让UnionID的获取方式

    自从微信小程序可以与公众号、APP之间实现打通之后,虽然可以相互之间获得一些信息,但是操作流程还是比较麻烦的,不利于提升用户体验的满意度。所以,为了更加方便用户使用,微信官方又信息获取方式这一块来进行功能的优化升级,能更加便捷快速地获取用户信息以及UnionID。这一块的升级具体包括两个部分:

  • 餐饮行业福音,附近的小程序新功能推出

    在微信小程序账号愈来愈多的现在,相应地也给运营者的管理工作与用户对附近小程序的查找到来不便,所以,微信官方就针对这两个问题进行功能升级,让两个新的功能区解决这两个旧问题,获得更好的管理与使用体验。

  • 微信小程序开发有哪些开发工具?

    包括官方的、非官方的开发工具在内,微信小程序开发市场上现在大概有十余种开发工具可供使用,经过小编认真细致地精心挑选之后,我选择了四款比较突出的开发工具准备来好好介绍一下,没被翻牌的工具们也不要气馁,再接再厉以后一定能成功引起小编注意的。

  • 微信小程序开发数据分析功能能实现什么数据需求

    我们常常说,微信小程序开发了数据功能能给自己带来多好多好的效果,却很少提及到,这个数据分析功能能满足什么样的数据需求,导致很多小程序所有者在开发了这个功能之后,却不知道要去怎么使用,能有什么数据可以用来分析使用。所以,为了让这个功能能被更多人认识,今天的这篇软文,就要来详细说说这个问题。

  • 微信的未来,是否要靠微信小程序开发来支撑?

    对于微信公众号的开发现状,虽然没有大势已去的凄凉,但确实企业商家以及个人用户

pc蛋蛋 江苏快3 pc蛋蛋网 河北快三 pc蛋蛋网站 湖北快3平台 河北快3 pc蛋蛋 pc蛋蛋 pc蛋蛋开户