小程序中data数据的处理方法总结(小程序交流群:604788754)
WXML:
<view class="container">
<view wx:for="{{list}}" wx:key="this" style="padding: 10px 0;border-bottom: 1px solid #ddd;">
<view>
{{index+1}}、{{item.name}}
</view>
<view class="textright font12" style="color: #2A53CD;">
<text bindtap="remove" data-index="{{index}}" class="marlr10">删除</text>
<text bindtap="edit" data-index="{{index}}" >修改</text>
</view>
</view>
<button class="martop20" bindtap="add_before">
向前插入数组
</button>
<button class="martop20" bindtap="add_after">
向后插入数组
</button>
<button class="martop20" bindtap="clear">
清空数组
</button>
</view>
WXSS:
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
} .userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: %;
} .userinfo-nickname {
color: #aaa;
} .usermotto {
margin-top: 200px;
}
JS:
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
list:[{
id:,
name:'应季鲜果',
count:
},{
id:,
name:'精致糕点',
count:
},{
id:,
name:'全球美食烘培原料',
count:
},{
id:,
name:'无辣不欢生猛海鲜',
count:
}]
},
//向前增加数据
add_before:function (){
//要增加的数组
var newarray = [{
id:,
name:'向前增加数据--'+new Date().getTime() ,
count:
}];
this.data.list = newarray.concat(this.data.list);
this.setData({
'list': this.data.list
});
},
//向后增加数据
add_after:function (){ //要增加的数组
var newarray = [{
id:,
name:'向后增加数据--'+new Date().getTime() ,
count:
}];
this.setData({
'list':this.data.list.concat(newarray)
});
},
//删除
remove:function (e){ var dataset = e.target.dataset;
var Index = dataset.index; //拿到是第几个数组 this.data.list.splice(Index,); this.setData({
list:this.data.list
});
},
//修改
edit:function (e){
var dataset = e.target.dataset;
var Index = dataset.index; //拿到是第几个数组
this.data.list[Index].name = '修改了内容'+new Date().getTime(); this.setData({
list:this.data.list
});
},
//清空
clear:function (){ this.setData({
list:[]
});
} })
效果图如下:
小程序中data数据的处理方法总结(小程序交流群:604788754)的更多相关文章
- 小程序中data数据的处理方法总结
wxml代码: <view class="container"> <view wx:for="{{list}}" wx:key="t ...
- 【Android进阶】怎样使用文件来保存程序中的数据
在程序中.有非常多保存和获取数据的方法,本篇文章,主要介绍使用文件系统对程序中的数据进行保存和读取的操作 我直接写了一个帮助类,进行文件的写入和读取操作 /** * 用于在文件里保存程序数据 * * ...
- PatentTips - 在物联网中进行数据过滤的方法和装置
背景技术 [0001] 本发明涉及物联网,特别涉及在物联网进行数据过滤的方法和装置. [0002] 物联网是新一代信息技术的重要组成部分,特指物物相连的网络.具体地,物联网是指通过各种信息传感设备,如 ...
- 如何在原生微信小程序中实现数据双向绑定
官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...
- excel中的数据导入oracle方法
SQL_loader批量上传数据 1. 注释 在工作中,很多时候会遇到如下情况:需要将excel中的数据批量上传到ORACLE表中.如果是小数据量,如几十条至几百条,那么用plsql dev工具 ...
- 归纳从文件中读取数据的六种方法-JAVA IO基础总结第2篇
在上一篇文章中,我为大家介绍了<5种创建文件并写入文件数据的方法>,本节我们为大家来介绍6种从文件中读取数据的方法. 另外为了方便大家理解,我为这一篇文章录制了对应的视频:总结java从文 ...
- SAP SMARTFORMS-基于内存方式在report程序中传递数据到smartforms显示
一.准备工作 1.新建include程序 1> include程序名字:ZDD_INC_0104 2> ZDD_INC_0104 程序中的内容为 2.使用T-CODE :SE11新建两个 ...
- 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以 ...
- C++程序中调用其他exe可执行文件方法
在编程过程中有个需求,点击某个按钮需要弹出系统的声音控制面板.在网上查了下代码中调用其他exe程序或者打开其他文件的方法. 自己借鉴网上的文章稍微总结下,加深下印象,也给方便自己用. 在代码中调用其他 ...
随机推荐
- vue-cli ——解决多次复用含有Echarts图表组件的问题
在vue项目里,组件复用是一件很开心的事,可以节省很多时间去排版,达到事半功倍效果,但是昨晚在vue-cli项目里组件复用时发现基于Echarts图表的组件不能够复用,昨晚捯饬了很久,终于还是解决了这 ...
- JVM 工作原理和流程
作为一名Java使用者,掌握JVM的体系结构也是必须的.说起Java,人们首先想到的是Java编程语言,然而事实上,Java是一种技术,它由四方面组成:Java编程语言.Java类文件格式.Java虚 ...
- SQL-递归查询在Ora与Mssql
今天在工作中,有同事“请教”从 Sql Server 移植数据到 DM DB 的改写问题,本以为难度不大,结果发现 Sql Server 数据库的语法.架构上,与 Oracle / DM 数据库差异还 ...
- 【读书笔记】使用JMeter创建数据库(Mysql)测试
读书笔记:<零成本实现Web性能测试>第4章 记得某天按照虫师博客的写的,折腾后成功了.今天又忘记了... 折腾后又成功了,赶紧记录下... 原文:http://www.cnblogs.c ...
- 自动化运维 --- git
一. git 概括 二.常用指令 git init 初始化 git status 查看git的状态 git add 将文件放到缓存区 git commit -m 将缓存区的内容提交到本地仓库 git ...
- topcoder srm 615 div1
problem1 link 对于数字$x$,检验每个满足$x=y*2^{t}$的$y$能否变成$x$即可. problem2 link 如果起点到终点有一条长度为$L$的路径,那么就存在长度为$L+k ...
- SPOJ 8093 JZPGYZ - Sevenk Love Oimaster
思路 可以用复杂度不对的做法水过去 相当于求parent树子树中的颜色种数,可以离线后树状数组(HH的项链,询问右端点排序之后维护last),dsu on tree,莫队都可以 但是也可以记录每个点上 ...
- 线程demo异常处理
今天写了个线程小demo,出现了异常, 如下: Traceback (most recent call last): File "threading.py", line 1, in ...
- Android虹软人脸识别sdk使用工具类
public class FaceUtil { private static final String TAG = FaceUtil.class.getSimpleName(); private st ...
- DAY18 常用模块(二)
一.随机数:RANDOM 1.(0,1)小数:random.random() 2.[1,10]整数:random.randint(1,10) 3.[1,10)整数:random.randrang(1, ...