必知小技巧：微信小程序this.setData修改对象中某个属性的值

水星记_ 2023-12-21 原文

前言

关于“微信小程序 this.setData 修改对象中某个属性的值”，这是一个非常常见且有用的操作。在本文中，我将模拟各种使用场景介绍如何使用 this.setData 方法来实现相关的操作。从而帮助大家更好地了解和掌握这一技巧。

常规写法

做过微信小程序的同学都知道，this.setData() 方法可以修改或者更新 data 中的值。那不知道大家有没有遇到这么一种情况，我要修改对象中某个属性的值该怎么办呢？是不是第一想到的就是这样写：

结果是在编译器中就直接报错，很显然，肯定是不能这样写的，那如果我就是想要修改对象中某个属性的值呢？

1. 在其外面套一层数组

['对象.属性']: 修改的值

.wxml

<view>
    <view class="tabsBox">
        <text>性别：</text>
        <text>{{objs.sex}}</text>
    </view>
    <view class="tabsBox">
        <text>年龄：</text>
        <text>{{objs.age}}</text>
    </view>
    <button bindtap="btnClick">点击修改</button>
</view>

.js

const app = getApp()
Page({
    data: {
        // 默认的数据
        objs: {
            sex: "女",
            age: "18",
        },
    },
    // 点击事件
    btnClick() {
        this.setData({
            ['objs.sex']: "男",
            ['objs.age']: "20",
        })
    },
})

实现效果

2. 放在对象中

对象: {属性: '值'}

.wxml

<view>
    <view class="tabsBox">
        <text>性别：</text>
        <text>{{objs.sex}}</text>
    </view>
    <view class="tabsBox">
        <text>年龄：</text>
        <text>{{objs.age}}</text>
    </view>
    <button bindtap="btnClick">点击修改</button>
</view>

.js

const app = getApp()
Page({
    data: {
        // 默认的数据
        objs: {
            sex: "女",
            age: "18",
        },
    },
    // 点击事件
    btnClick() {
        this.setData({
            objs: {
                sex: "男",
            },
        })
    },
})

实现效果

可以看到一个很明显的问题，我明明只修改了性别字段的值，但是默认存在的年龄字段的值却消失了，因为这种写法会导致该对象的其他属性全部消失，所以要慎重选择，尽量使用第一种写法就好啦。

.wxss文件

.tabsBox {
    margin: 0rpx 10rpx;
    padding: 20rpx 0rpx;
    font-size: 30rpx;
    border-bottom: 1px solid gainsboro;
}

- 拓展延伸

修改数组中某个对象的属性值

.wxml

<view>
    <view wx:for="{{imgData}}" wx:key="index">
        <view>{{item.imgTit}}</view>
        <view>
            <image src="{{item.imgUrl}}"></image>
        </view>
    </view>
    <button bindtap="btnClick">点击修改</button>
</view>

.js

const app = getApp()
Page({
    data: {
        // 默认的数据
        imgData: [{
            imgTit: "风景图1",
            imgUrl: "https://img0.baidu.com/it/u=530426417,2082848644&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656522000&t=0050fe01b5db9476166821b30d44655c",
        }, {
            imgTit: "风景图2",
            imgUrl: "https://img1.baidu.com/it/u=700675537,3936578503&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656522000&t=54182c0a2d3f1d8d22d9c24e8556a12e",
        }],
    },
    // 点击事件
    btnClick() {
        //数组动态赋值
        const imgOne = "imgData[0].imgUrl";
        const imgTwo = "imgData[1].imgUrl";
        this.setData({
            [imgOne]: "https://img0.baidu.com/it/u=3643895624,2552772604&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
            [imgTwo]: "https://img2.baidu.com/it/u=63249423,2260265143&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
        })
    },
})

如下：

setData 技巧 span class token 前端小程序

有关必知小技巧：微信小程序this.setData修改对象中某个属性的值的更多相关文章

ruby - 如何从 ruby 中的字符串运行任意对象方法？ - 2
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2
在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev
ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2
我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss
Ruby 写入和读取对象到文件 - 2
好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信
ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？最佳答案像Ruby中的所有其他对象
ruby-on-rails - 未在 Ruby 中初始化的对象 - 2
我在Rails工作并有以下类(class):classPlayer当我运行时bundleexecrailsconsole然后尝试:a=Player.new("me",5.0,"UCLA")我回来了:=>#我不知道为什么Player对象不会在这里初始化。关于可能导致此问题的操作/解释的任何建议？谢谢，马里奥格最佳答案 havenoideawhythePlayerobjectwouldn'tbeinitializedhere它没有初始化很简单，因为你还没有初始化它!您已经覆盖了ActiveRecord::Base初始化方法，但您没有调
ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2
我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser
ruby - 一个 YAML 对象可以引用另一个吗？ - 2
我想让一个yaml对象引用另一个，如下所示:intro:"Hello,dearuser."registration:$introThanksforregistering!new_message:$introYouhaveanewmessage!上面的语法只是它如何工作的一个例子(这也是它在thiscpanmodule中的工作方式。)我正在使用标准的rubyyaml解析器。这可能吗？最佳答案一些yaml对象确实引用了其他对象:irb>require'yaml'#=>trueirb>str="hello"#=>"hello"ir
ruby - 更改 ActiveRecord 中对象的类 - 2
假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。
ruby-on-rails - ActiveRecord 对象相等 - 2
根据ActiveRecord::Base的文档:==(comparison_object)Returnstrueifcomparison_objectisthesameexactobject,orcomparison_objectisofthesametypeandselfhasanIDanditisequaltocomparison_object.id.Notethatnewrecordsaredifferentfromanyotherrecordbydefinition,unlesstheotherrecordisthereceiveritself.Besides,ifyoufet

必知小技巧：微信小程序this.setData修改对象中某个属性的值

前言

常规写法

1. 在其外面套一层数组

实现效果

2. 放在对象中

实现效果

- 拓展延伸

有关必知小技巧：微信小程序this.setData修改对象中某个属性的值的更多相关文章

随机推荐