8、微信小程序免费视频教程之for

微信小程序的视图层其实就是项目当中所有的wxml以及xwss文件的集合。

wxml文件用于描述页面的结构。

wxss文件用于描述页面的样式。

微信小程序的逻辑层负责将数据进行处理，然后发送给视图层来进行展示。

视图层的主要作用就是将数据进行展示。将得到的事件反馈给逻辑层。

view ----div

text-----span

作为一种组件。可以这种组件称为视图容器组件。

1、数据绑定。

wxml文件内的所有数据都来自js文件当中Page的data对象。

数据绑定需要作用双大括号来对变量进行包裹！

<text>{{content}}</text>

data: {

content:"我是一只小小小小小小鸟"

},

还可以通过数据绑定来设置组件的属性.(设置属性也需要使用双大括号)

<text id="item-{{id}}"">{{content}}</text>

data: {

content:"我是一只小小小小小小鸟"，

id:888

},

另外还可以通过{{}}来实现

三元运算

算术运算

字符串的拼接

2、条件语句

通过条件语句来对.wxml中的内容进行渲染。 根据条件的不同来显示不同的内容。

wx:if:通过用wx:if="{{}}"来判断是否需要渲染该代码块。

还可以使用wx:elif和wx:else

block仅仅是一个包裹元素而已，不属性于小程序的组件，也不会在页面当中进行任何的渲染。可以通过该标签来实现一些属性上的控制。

3、列表语句

wx:for 可以通过该语句实现对数组的遍历。

index:数组当前项的下标值

item:数组当前项的元素值

wx:for-item:指定数组当前元素的名字

wx:for-index:指定数组当前下标的名字

wx:for语句是可以相互嵌套的。