主要解决数据列表渲染问题
1、
这是官方给出的案例
wx:for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
wx:for-item 可以指定数组当前元素的变量名,
使用 wx:for-index 可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
2、接下来用实际案例渲染本地数据,并加以说明改变变量名之间的区别。
- 在项目中新建一个数据文件,
var news= [
{
"id":"1",
"new" :"这是第一条消息"
},
{
"id":"2",
"new": "这是第二条消息"
},
{
"id":"3",
"new": "这是第三条消息"
}
]
module.exports = {news}; //一定要记住这句话 将数据暴露出去
3.然后在需要渲染的页面
mine.js
var jsonData = require('../../datas/news.js'); //将数据代码引进来
Page({
data: {
},
onLoad: function () {
var that = this;
this.setData({
news: jsonData.news
});
}
})
mine.wxml
<!-- 默认方式
<view class="newslist" wx:for="{{news}}"
>
<text>
下标{{index}}
打印ID {{item.id}}
输出消息{{item.new}}
</text>
</view>
-->
<view wx:for="{{news}}" wx:for-index="idx" wx:for-item="item2">
<text class="newslist" >
下标{{idx}}
ID {{item2.id}}
输出消息 {{item2.new}}
</text>
</view>
4、以上两种方式输出都是
4、关于wx:key使用见解
当我们的渲染列表项目具有唯一标识符的时候,也就是说有一定的顺序id,我们加上key属性可以提高我们的性能,可以在DIff算法对比执行之后直接复用顺序,而不需要重排,从而提高的我们渲染的性能。
key的作用主要就是为了性能优化,key让组件具有了唯一性,能让diff算法更快的找到需要更新的组件dom,在绑定key的时候,最好是一个唯一的值,如item.id 而不能是简单的index,如果不使用唯一key,那么在有状态组件中会出现渲染错误。因为它默认用就地复用策略,如果数据项的顺序被改变,那么vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,不会重新排列元素的位置。如果是使用 key,它会基于key重新排列元素顺序,并且会移除 key 不存在的元素。
简单说就是,不使用key就会原地复用,使用key就会对元素位置进行重新排列,能够关联数据状态。