微信小程序的视图层其实就是项目当中所有的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语句是可以相互嵌套的。