小程序入门基础2-渲染

数据绑定

在每个页面文件的js文件中我们可以找到data，这里用于存放我们定义的数据，要在页面中渲染打印出这些数据可以在对应的页面文件wxml里面增加

     <view>
          {{person}}
      </view>
        <text class="" selectable="false" space="false" decode="false">
            
        </text>
          

这里的text像是html中的p标签（行内元素），而view像是里面的div（块级元素），注意用view渲染对象的内容时要用双括号括起来对象的名称，比如这里的person，如果括起来的对象是一个object，那么只会显示是一个object，具体显示要通过.xxx来显示，比如person.name打印出对象person中的name属性。

运算

在view中花括号内是可以加入运算的

运算就相当于表达式，但是不相当于语句，所以花括号中不能加入语句中的一些项，下面列举出可以填的三类表达式

列表渲染

数组循环

就是循环wxml中的list

以下是表现结果

对象循环

wx:for="{{对象}}"  wx:for-item="对象的值" wx:for-index="对象的属性"//所以每个=后面的内容都要根据要循环的对象改变，避免误导人
//循环对象的时候建议把item和index的名称都修改一个一看就懂是什么的单词

 

block

特性

1. 相当于一个占位符标签

2. 写代码时，可以看到标签的存在

3. 页面渲染时，小程序会把它移除掉

将本身的view标签改成block标签后，当我们查看标签时看不到循环的类，也看不到标签的存在

当你要循环某些数据或对象时，如果不想额外的加外标签可以使用block标签

条件渲染

1.wx:if

wx:if="{{true/false}}"当值为true时标签显示，否者标签隐藏

当括号内填入变量时可以动态的调整显示

这里还有个else if只是合并写为elif

2.hidden

 

用法：

1.在属性上直接加入属性hidden

2.hidden="{{true}}"

 

使用建议