微信小程序如何为data中的对象的某一属性设置（与web完全不同）

最新推荐文章于 2024-04-23 11:12:20 发布

原创最新推荐文章于 2024-04-23 11:12:20 发布 · 700 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #JavaScript

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍微信小程序中如何为 data 中的对象属性进行动态赋值。通过示例对比了 Web 端 Vue.js 和微信小程序的不同实现方式，展示了如何使用 this.setData 方法结合字符串属性路径来更新视图。

微信小程序如何为data中的对象的某一属性设置（与web完全不同）

话不多说上代码
web端

  data(){

    return{

      form: {
         userId:'',
        birthDate:new Date(),
        password:'',
        email:'',
        sex:0,
        telephone:'',
        userName:'',
        userPic:'',
        userAddress:'',
      },
    }

  },
  methods:{
    change(){
   		 this.form.userId = '777777'
    },

微信小程序

  data: {
    loginForm: {
      userId: '',
      password: '',
    }
  },

  //获取输入的账号
  usernameInput:function(e){
    //修改对象的某一属性时，先将该对向的该属性变成string
    let userId = "loginForm.userId"
    this.setData({
      [userId]:e.detail.value//注意这里是冒号哦！！！！
    });
  },

  //获取输入的密码
  passwordInput:function(e){
    let password = "loginForm.password"
    this.setData({
      [password]: e.detail.value
    });
  },