uni-app第一节-基础

2020-01-08  本文已影响0人  企业信息化架构

对象数组赋值

如果开始已经赋值,例如在data里面初始化,数组为2个对象。对数组进行修改时,如果采用游标的方式,只能修改两个值,不会增加值。
如果需要重置数组,则需要先清空数据,然后采用push方式增加对象。

//初始化
data() {
            return {
                addressList: [
                    {
                        id:1,
                        contactMan:"lgl",
                        contactPhone:"18826482013",
                        isDefault:1,
                        province:"广东省",
                        city:"广州市",
                        area:"天河",
                        contactAddress:"测试"
                    },
                    {
                        id:2,
                        contactMan:"lgl",
                        contactPhone:"18826482013",
                        isDefault:1,
                        province:"广东省",
                        city:"广州市",
                        area:"天河",
                        contactAddress:"测试"
                    }
                ]
            }
        }
//赋值
                    this.addressList=[];
                    let addressListRes = res.data;
                    for (var i = 0; i < addressListRes.length; i++) {
                        let address = {};
                        address.id =  addressListRes[i].id;
                        address.contactMan = addressListRes[i].contactMan;
                        address.contactPhone = addressListRes[i].contactPhone;
                        address.isDefault = addressListRes[i].isDefault;
                        address.province = addressListRes[i].province.name;
                        address.city = addressListRes[i].city.name;
                        address.area = addressListRes[i].area.name;
                        address.contactAddress = addressListRes[i].contactAddress;
                        this.addressList.push(address);
                    }

let与var

let是ES6中新增命令,用来声明局部的变量。用法类似var,但是所声明的变量,只会在let命令所在的代码块内有效,而且有暂时性死区的约束。

function(e)

e是参数的名字。参数分为:
1.形参:形式参数,相当于函数声明的局部变量,实参把自己的值赋给形参,形参就保存了这个值
2.形参只能在函数内部使用。
3.实参:实际参数,函数的调用者把值放在实参里面,传给函数的形参。
所以,实参、形参就相当于一个管道,一个接口,使调用函数的人可以通过这种方式把要计算的值传给函数去计算。

e.currentTarget.dataset.* 可以获取data-*的数据

<view class="tui-address-imgbox" :data-key="item.id"  @tap="toEditAddress">
    <image class="tui-address-img" src="/static/images/mall/my/icon_addr_edit.png" />
</view>

toEditAddress(e){
    let key = e.currentTarget.dataset.key || "";
    uni.navigateTo({
        url: '../address/editAddress?addressId='+key
    })
}

vue 的 this

在vue中当在vue中使用匿名函数的时候,会出现this指针改变的问题,出现方法或者属性数据undefine的问题,以下是相关的解决方法
一、在回调函数之前重新将this赋值
例如

 connection() {
      // 更换that指针
      var that = this
      const socket = new SockJS('http://localhost:8080/test-info')
      this.stompClient = Stomp.over(socket)
      console.log('----------------')
      console.log(this.stompClient)
      console.log('----------------')
      const tt = this.stompClient
      // 此处不能使用 this.stompClient
      tt.connect({}, function(frame) {
        console.log('++++++++++++++++')
        console.log('Connected: ' + frame)
        console.log('++++++++++++++++')

        tt.subscribe('/stock/price', function(val) {
          console.log(val)
          console.log(JSON.parse(val.body))
          that.list1 = JSON.parse(val.body)
        })
      })
    }

二、使用箭头函数

  connection() {
      // 更换that指针
      const socket = new SockJS('http://localhost:8080/test-info')
      this.stompClient = Stomp.over(socket)
      console.log('----------------')
      console.log(this.stompClient)
      console.log('----------------')
       this.stompClient.connect({}, (frame) => {
        console.log(frame)
        this.stompClient.subscribe('/stock/price', (val) => {
          console.log('--------list1-----------')
          console.log(this.list1)
          console.log('--------list1-----------')
          this.list1 = JSON.parse(val.body)
        })
      })
    }

在回调函数中有时候回调函数会修改this的指向,this本来应该指的是vue这个对象,但是他的this指向的是回调,由于在回调函数改变了this指针,导致后序出现this指向的数据出现未定义的状况。
但是在箭头函数中this指向的永远都是vue对象,所以建议多是想用箭头函数

参考

Uni-app 学习笔记
vue 中的this问题

上一篇 下一篇

猜你喜欢

热点阅读