微信小程序中用setData修改一个对象的属性值

1.
 
Page({
    data: {
      items:{ //items为一个对象,is_like和like分别为其两个属性
     is_like: 0,
    like: 0
 }
 },

likes: function () {

var is_like ="items.is_like"; //先用一个变量,把items.is_like用字符串拼接起来

var like = "items.like";

if (this.data.items.is_like == 0 && this.data.items.like==0){

this.setData({

[is_like]:1, 使用【】将字符串包起来,为其赋值

[like]:1

})

} else if (this.data.items.is_like == 1 && this.data.items.like == 1){

this.setData({

[is_like]: 0,

[like]: 0

})

}

},

})

2.

index.wxml: 使用bindtap绑定事件

<view class="centers" bindtap="likes">

<view wx:if="{{items.is_like == 0}}">

<image class="src" src="../../image/like1.png"></image>

</view>

<view wx:else>

<image class="src" src="../../image/like2.png"></image>

</view>

<view class="space">赞<text class="character">:</text>{{items.like}}</view>

</view>

时间: 2024-10-07 19:45:14

微信小程序中用setData修改一个对象的属性值的相关文章

微信小程序的setData

由于微信小程序诞生于vue.js和react.js之后,所以他们在当初设计代码架构的时候也是借鉴了vue.js和react.js的想法,也遵循的组件化的方式,延用了setData的机制去把视图层和逻辑层做一个“中转站”两边连接起来.但是这种机制一直存在性能上的问题,微信小程序也不例外.先看一张图: 这张图大体描述了一下setData的工作原理,当程序开始触发setData操作的时候,先把数据做成字符串形式传递,同时把转换后的数据拼接成js脚本形式,接下来这个js脚本都被2边提供的evaluate

微信小程序监听input输入并取值

小程序的事件分为两种,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件等非冒泡事件,需要到组件的文档里去找,如下是我截图的一些常用的非冒泡事件 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. 想要实时监听input的输入只要使用bindinput就可以了, wxml: <input bindinput='watchPassWord' type='password

微信小程序 this.setData() 详解

1.定义 setData()函数用于将逻辑层数据发送到视图层,同时对应的改变this.data的值. 2.setData()参数格式 接受一个对象,以键(key)值(value)的方式改变值. 其中,key十分灵活,以数据路径的方式给出 -- array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义. 3.实例 Page({ data: { text: 'init data', array: [{text: 'init data'}], object: {

微信小程序点击列表添加 去除属性

首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式 wxml: <view> <view wx:for="{{list}}" wx:key="num" class="list" > <text bindtap='changColor' data-index='{{index}}' class='{{item.check?"text-active&quo

微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)

我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="{{minusStatus}}" bindtap="bindMinus">-</text&

微信小程序入门——Mustache语法学习

微信小程序中用到了大量Mustache语法,特发此文学习一下 1.简单的变量调换:{{name}} 1 var data = { "name": "Willy" }; 2 Mustache.render("{{name}} is awesome.",data); 返回成果 Willy is awesome. 2.若是变量含有html的代码的,例如:<br>.<tr>等等而不想转义可以在用{{&name}} 1 va

微信小程序获取输入框(input)内容

微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type="tel" bindinput="getInput" /> js Page({ data:{ getInput: null }, getInput:function(){//方法1 this.data.getInput = e.detail.value; }, /

SAP UI5和微信小程序对比之我见

今天继续由SAP成都研究院著名的菜园子小哥Wang Cong,给大家分享他作为一个SAP前端人员是如何看待SAP UI5和微信小程序的异同点的. 关于Wang Cong种菜的手艺,大家请移步到他以前的文章 SAP成都研究院非典型程序猿,菜园子小哥:当我用UI5诊断工具时我用些什么 去观摩,这里不再赘述. 下面是他的正文. 近几年微信小程序发展之势如火如荼,越来越多的用户放弃原生App,转而投入小程序的怀抱,大有"一个微信行天下"的趋势. 面对如此巨大的流量机遇,百度.阿里等公司也纷纷在

微信小程序之菜鸟选手入门教学(一)

1. 小程序的优缺点优点:不需下载.卸载 使用方便缺点:嵌套在微信中,属于微信的子应用2. 使用的技术实际上是Hybrid技术的应用Hybrid App (混合模式移动应用),使用网页语言和程序语言共同开发小程序兼具了Native App所有优势,也兼具了Web App使用Html5跨平台开发低成本 注:微信小程序与传统app没有相互取代的可能,它们是相辅相成的 3. 主要用到的技术WXML——对Html5进行了简单的封装,并且去掉了一些微信小程序中用不到的标签WXSS——对CSS进行了简单的封