微信公众号开发

微信小程序 笔记 wx:key用法

本文主要是介绍微信小程序 笔记 wx:key用法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

什么时候用:数组内容会动态改变,要使用wx:key保持项目自己的特征和状态;不使用key的话会整个销毁再创建,导致性能下降

什么时候不需要:数组是静态的不需要改变,不关注顺序,就可以不适用

之前一直不理解wx:key是什么用法,举两个例子。

在没引入wx:key之前

  1. <!--my.wxml-->
  2. <view wx:for="{{lines}}">
  3. <switch>{{item.info}}</switch>
  4. </view>
  5. <button bindtap="tapfn">数据更新</button>
  1. //my.js部分
  2. data: {
  3. lines:[
  4. {
  5. id:1,
  6. info:"萨摩耶"
  7. },
  8. {
  9. id: 2,
  10. info: "哈士奇"
  11. },
  12. {
  13. id: 3,
  14. info: "阿拉斯加"
  15. }
  16. ]
  17. },
  18.  
  19. tapfn:function()
  20. {
  21. var lines=this.data.lines
  22. lines.splice(0,0,{
  23. id:5,
  24. info:"田园犬"
  25. })
  26. this.setData({
  27. lines:lines
  28. })
  29. },

效果如下:

点击数据更新后

可以看出,这里发生了错误,选择的东西变成了萨摩耶

当我们引入wx:key后,以id作为wx:key

  1. <!--my.wxml-->
  2. <view wx:for="{{lines}}" wx:key="id">
  3. <switch>{{item.info}}</switch>
  4. </view>
  5. <button bindtap="tapfn">数据更新</button>

再进行相同的操作

这一次保持了正确,这正是wx:key的效果。

那么,当data字段里面是一个纯数组而不是对象,即没有id可以做wx:key时怎么办呢。下面的例子:

  1. <!--my.wxml-->
  2. <view wx:for="{{lines}}" wx:key="*this">
  3. <switch>{{item}}</switch>
  4. </view>
  5. <button bindtap="tapfn">数据更新</button>
  1. //my.js
  2. data: {
  3. lines:[1,2,3,4]
  4. },
  5.  
  6. tapfn:function()
  7. {
  8. var lines=this.data.lines
  9. lines.splice(0,0,5)
  10. this.setData({
  11. lines:lines
  12. })
  13. },

 效果如下:

点击后:

效果正确,所以在对数组对应的wx:key应该是*this

 

这篇关于微信小程序 笔记 wx:key用法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!