小程序丨手把手教你微信小程序实战开发(六)：渲染标签的使用

微信小程序实战系列教材：
1.微信小程序实战开发（一）：微信小程序简介
2.微信小程序实战开发（二）：小程序基本目录结构讲解
3.微信小程序实战开发（三）：小程序视图容器（view container）
4.微信小程序实战开发（四）：组件的基本使用讲解5.微信小程序实战开发(六)：渲染标签的使用

在微信小程序里面目前只有两种渲染标签：条件渲染和列表渲染。

一.条件渲染
在框架中，我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，因为 wx:if 是一个控制属性，需要将它添加到一个标签上，也就是view标签上。但是如果我们想一次性判断多个组件标签，我们可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。下面我们就紧接着上节的课程案例来介绍。
.js

1. Page({
   

2.   data:{
   

3.     text:"这是的内容",
   

4.     btnText:"这是按钮的内容",
   

5.   },

.wxml

1. 51小程序demo
   

2. 
   

3. 
   

4. <button type="default"  hover-class="other-button-hover"> default </button>
   

5. <button type="primary" bindtap="btnClick"> {{btnText}} </button>
   

6. 
   

7. <view wx:if="{{true}}">{{text}}</view>

复制代码

1）.可以当if条件为true时，显示“

这是的内容

”，如下图所示：

2).当if条件为false时，就不会显示“

这是的内容

”

，如下图所示：

1. <view wx:if="{{false}}">{{text}}</view>

3).当然，上述实例中的true和false也可以是数据绑定格式实现，

所有当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

代码和实现效果图如下：

1.   data:{
   

2.     text:"这是的内容",
   

3.     btnText:"这是按钮的内容",
   

4.     show :true,
   

5.   },

6. <view wx:if="{{show}}">{{text}}</view>

4).我们还可以做动态的条件渲染判断，点击鼠标时做条件渲染：

1.   data:{
   

2.     text:"这是的内容",
   

3.     btnText:"这是按钮的内容",
   

4.     show :true,
   

5.   },

6.   btnClick: function() {
   

7.       console.log("按钮被点击了了...")
   

8.       var isShow = this.data.show;
   

9. 
   

10.       console.log("isShow:" + isShow)
    

11.       this.setData({text:"这是新的51小程序内容"})
    

12.   }

编译可以看到：

设置show:false后编译：

5）.我们还有做一个点击后“隐藏”--“显示”的循环动作。

1.   btnClick: function() {
   

2.       console.log("按钮被点击了了...")
   

3.       var isShow = this.data.show;
   

4. 
   

5.       console.log("isShow:" + isShow)
   

6.       this.setData({text:"这是新的51小程序内容",show:!isShow})
   

7.   }

其编译后的显示结果如下：

6）

也可以用 wx:elif 和 wx:else 来添加一个 else 块，如下所示：

1. 51小程序demo
   

2. 
   

3. 
   

4. <button type="default"  hover-class="other-button-hover"> default </button>
   

5. <button type="primary" bindtap="btnClick"> {{btnText}} </button>
   

6. 
   

7. <view wx:if="{{show}}">{{text}} 1</view>
   

8. <view wx:else>{{text}} 2</view>

根据以上代码，当我们点击鼠标时，会循环显示1 2我们看一下结果：

二.列表渲染
列表渲染其实就是我们常说的for循环渲染啦，用过列表数据我们可以循环显示一堆新闻数据等，在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

1. <view wx:for="{{array}}">
   

2.   {{index}}: {{item.message}}
   

3. </view>

1）.我们来继续举例查看，在之前我们的.wxml文件中新增如下代码：

1. <view wx:for="{{['aaa','bbb','ccc']}}">
   

2. 小程序教程循环播放...
   

3. 
   

4. </view>

编译后的结果如下图所示：

2).同样，列表渲染也可以用数据绑定。上述同样的效果，用数据绑定实现的代码如下：

1.   data:{
   

2.     text : "这是的内容",
   

3.     btnText : "这是按钮的内容",
   

4.     show : false,
   

5.     news : ['aaa','bbb','ccc'],
   

6.   },

7. <blockquote>51小程序demo

3）问题来了，我们如何才能显示数组里面的内容呢？

默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

。所以item可以显示数组里面的 内容了，我们来看一下：

1. <view wx:for="{{news}}">
   

2. {{item}}
   

3. 
   

4. </view>

编译后的显示结果如下所示：

1. <view wx:for="{{news}}">
   

2. {{index}} : {{item}}
   

3. 
   

4. </view>

4）.如何动态的更新数组列表里面的值呢？举例：我们设置每次点击都会删除数组的第一个值用shift();

1.   btnClick: function() {
   

2.       console.log("按钮被点击了了...")
   

3.       var isShow = this.data.show;
   

4.       var newsData = this.data.news;
   

5.       newsData.shift();
   

6. 
   

7.       console.log("isShow:" + isShow)
   

8.       this.setData({text:"这是新的51小程序内容",show:!isShow,news:newsData})
   

9.   }

我们看一下演示效果：

本节注意：

1.在data中对show进行赋值时，不需要加双引号。

爱盈利（aiyingli.com）移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者，移动盈利指导。我们的目标是让盈利目标清晰可见！降低门槛，让缺乏经验、资金有限的个人和团队获得经验和机会，提高热情，激发产品。

【转载说明】   若上述素材出现侵权，请及时联系我们删除及进行处理：8088013@qq.com