首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式

wxml:

<view>
<view wx:for="{{list}}" wx:key="num" class="list" >
<text bindtap='changColor' data-index='{{index}}' class='{{item.check?"text-active":""}}' >| {{item.message}}</text>
</view>
</view>

js:

/*
  这里获取list是一个数组对象
  tomorrow: [
    {
      thing: '吃饭',
      check: false
    },
    {
      thing: '睡觉',
      check: false
    },
    { 
      thing: '打豆豆',
      check: false
    }
  ]
*/
changColor: function (e) {
let index = e.currentTarget.dataset.index
let arrs = this.data.list;
if (arrs[index].check == false) {
arrs[index].check = true;
} else {
arrs[index].check = false;
}
this.setData({
list: arrs
})
},

核心在于修改对象属性check的值,然后在元素渲染是根据值进行样式的添加

微信小程序点击列表添加 去除属性的更多相关文章

  1. 微信小程序新闻信息列表展示

    微信小程序信息展示列表 wxml <!-- 轮播图 --> <view class='haibao' bindtap="seeDetail" id="{ ...

  2. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  3. 微信小程序开发-新闻列表之新闻列表绑定

    微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...

  4. 微信小程序信息展示列表

    微信小程序信息展示列表 效果展示: 代码展示: wxml <view class="head"> <view class="head_item" ...

  5. 基于微信小程序的用户列表点赞功能

    代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...

  6. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  7. 图解微信小程序---获取电影列表

    图解微信小程序---获取电影列表 代码笔记 list跳转 第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console  Log的方式获取我们电影的相关数据字段,后 ...

  8. 微信小程序,我的英雄列表

    最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 1.下载微信开发者工具 官网链接:https://mp.weixin.qq. ...

  9. 微信小程序 - 展开收缩列表

    代码源自于:微信小程序示例官方 index.wxml <block wx:for-items="{{list}}" wx:key="{{item.id}}" ...

随机推荐

  1. 【QT】Installer requires Xcode Version 5.0.0 for Qt download if toolchain not found

    When I install QT in MacOS 11.3.6, it prompts I need to install xcode then I install xcode but it wa ...

  2. Oracle 11g R2性能优化 tkprof

    另一篇博文总结了关于SQL TRACE工具的使用方式,但是产生的trace文件格式阅读起来并不是十分友好,为了更好的分析trace文件,Oracle也自带了一个格式化工具tkprof.tkprof工具 ...

  3. 黑苹果,Win7,Win10,Xp 各个系统镜像文件下载地址(备用)

    windows Mac Xp(系统镜像下载装系统专区)百度系统世家也可 http://www.xp933.com/download/ 黑苹果系统(各种驱动型号下载专区) http://www.it36 ...

  4. day12 python作业:员工信息表

    作业要求: 周末大作业:实现员工信息表文件存储格式如下:id,name,age,phone,job1,Alex,22,13651054608,IT2,Egon,23,13304320533,Tearc ...

  5. PPTP支持IPv6

    pptp支持ipv6,谷歌资料不多,这里整理下   主要用来给ipv4访问ipv6资源的场景使用,客户端连接上pptp后会分配得到一个ipv6地址,通过此地址访问ipv6的资源 客户端网段在pptp. ...

  6. 阿里云新老用户购买 2核8G云服务器5M带宽

    这次阿里云活动的力度还是很大的,2核8G云服务器5M带宽 3年才2070 ,还是很值的购买的. 也放一个我的团战队连接,欢迎大家一起拼低价 https://m.aliyun.com/act/team1 ...

  7. P1186 玛丽卡

    题目描述 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们知道从一个城市到另一个城 ...

  8. 制作Win10 U盘版移动便携系统

    制作U盘Win10 灌装WIM VHD_OneKey_beta2 把wim导入VHD文件 复制 WIN8USB.VHD boot bootmgr三个文件到U盘 把制作的Win10的VHD文件重命名为 ...

  9. wpf treeview 数据绑定 递归绑定节点

    1.先上效果 将所有节点加入ComboBox数据源,在ComboBox中选择时下方Treeview显示该节点下的子节点. 1.xaml文件,将以下代码加入界面合适位置 <StackPanel&g ...

  10. Recycle----项目总结

    github项目地址:https://github.com/HuChengLing/recycle 软件规模: 我们这个Recycle app属于一个小型项目,整体规模不大.预期有垃圾回收和二手品交易 ...