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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 开发小程序售后服务系统,让运营成本更低

    在所有商品销售行业中,消费者一般都会选择有可靠的售后服务的商家去进行消费,特别对家电、家具等行业来说,售后服务更是重要。但是,售后服务在保障消费者的同时,也会给企业商家带来一些必要的运营成本,包括人工成本以及服务材料成本等。所以,作为一个企业商家,必须要考虑的问题就是如何去降低运营成本,让利益最大化。

  • 微信小程序开发公司,模板开发能做出什么吗

    在微信小程序的不断发展后,开发市场上也相应地出现小程序模板。这对于没有技术人员、资金不足或者开发需求不高的企业来说,确实是一个不错的选择。不过,在选择模板之前,企业还是需要去好好了解一下小程序的模板究竟能做出什么样的效果,

  • 广州微信小程序开发常见应用领域有哪些?

    广州企业商家在确定做小程序开发之前,就必须给自己的小程序明确应用领域所在,而在确定应用领域之前,就必须了解一下微信小程序开发常见的应用领域有哪些。为了帮助企业商家较好地解决这一连串的问题,小编决定用这篇软文来简单说一下常见小程序应用领域。

  • 微信小程序开发踩坑的点在哪?为什么?

    程序猿在开发产品时,难免会踩坑,一旦踩坑,那就不仅仅是填坑那么简单,有时候可能也会耽误开发时间,因为不能及时将产品开发出来而给工作带来麻烦。微信小程序开发也是如此,你踩或不踩,坑就在哪里,不来不去。所以,程序猿在开发小程序之前,了解一下可能埋坑的点,相信会对开发进程有所帮助。

  • 公司企业做微信小程序开发怎么赚钱

    微信小程序之于用户来说就是一个工具性产品,而之于企业商家来说就是一个促进盈利的工具,这点是毋庸置疑的

  • 广州微信小程序开发,助力企业攫取线上流量,进入线下蓝海

    微信小程序的性质逐渐朝O2O模式靠近,原本仅以线下场景服务为主的定位,在不断的调整过后找到了最合适的开发模式,那就是用线上线下结合来运营

pc蛋蛋 广西快3走势图 pc蛋蛋网站 河北快三平台 湖北快3平台 pc蛋蛋网站 pc蛋蛋 江苏快3官网 PC蛋蛋 pc蛋蛋官方网址