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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 如何用微信小程序商城解决传统微商存在的问题?

    还记得微商风风火火发展的时候,朋友圈里面都被微商的商品刷屏,作为微信圈中原始的电商之一,它在一定时间段里面疯狂地获利

  • 小程序开发公司总结:微信小程序支付开发说明文档

    微信小程序开发支付功能的时候,需要根据支付开发文档中的说明去进行开发,它的模式分为两种,一种普通模式,一种是服务商模式

  • 企业商家该如何利用微信小程序串连整个微信圈

    微信小程序的开发上线至今,俨然已经成为开发市场的一部分,作为微信圈中被定位为连接线上场景与线下场景的工具,它在不断升级提高服务质量的同时

  • 微信里的小程序开发,都包括了哪些部分?

    很多人在选择开发微信小程序时,首先关心的一般都会是开发费用的问题,而开发费用最原始的估价点其实就是来自小程序开发的流程繁简程度,需求开发者了解小程序开发所包含的部分,就可以自行估计出大概的费用出来。

  • 微信小程序怎么做社群营销

    社群营销是一种网络推广中确定定向客户较好的方法,微信小程序的推广也可以通过社群营销去在社群中打响自己的知名度,让小程序的推广有个准确的承受群体,不让推广工作变成无用功。不过,对于微信小程序的社群营销,最首先要解决的就是如何去做的问题。

  • 小程序相比起传统网络平台,有什么营销优势?

    传统的网络媒体平台做营销时,一般都是以PC端作为出发点来设计流程、界面,只有在PC端上才能看到这些营销消息,这样的限制性条件就会让营销效果大打折扣。而以微信小程序等为代表的新媒体营销平台,相对于PC端来说,就有更加符合现代发展趋势与市场需求的优势了,这些优势主要有以下几个方面:

河北快3 凤凰彩票充值中心 河北快3 欢乐城彩票官网 购乐彩官网 江苏快3 江苏快3官网 265彩票充值中心 198彩票官网 彩都会彩票网