Demo地址:微信小程序wxs的简单应用

案例分析

张三、李四、王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量,

list数据结构如下,当我们使用wx:for进行显示时,发现个人对象里面包含车辆对象数组,

我们发现人名好现实,但是车辆数量不方便统计,这时使用wxs就能很好的解决

list: [{
id: 1,
name: '张三',
cars: [{
id: 1,
name: '奔驰'
},
......
]
},
......]
// index.wxml
<view class="container">
<view wx:for="{{list}}" wx:key="id" class="list">
<view>姓名:{{item.name}}</view>
<wxs module="m">
var getCarCount = function(array) {
var count = 0;
for (var i = 0; i < array.length; ++i) {
count++;
}
return count;
}
module.exports.getCarCount = getCarCount;
</wxs>
<view class="gray-color">拥有{{m.getCarCount(item.cars)}}辆车</view>
</view>
</view>
// index.js的list数据如下
data: {
list: [{
id: 1,
name: '张三',
cars: [{
id: 1,
name: '奔驰'
},
{
id: 2,
name: '宝马'
}
]
},
{
id: 2,
name: '李四',
cars: [{
id: 3,
name: '卡迪拉克'
},
{
id: 4,
name: '英菲尼迪'
},
{
id: 5,
name: '马自达'
}
]
},
{
id: 3,
name: '王五',
cars: [{
id: 6,
name: '飞度'
}]
}
]
},

Demo地址:微信小程序wxs的简单应用

微信小程序 wxs的简单应用的更多相关文章

  1. 微信小程序 WXS实现json数据需要做过滤转义(filter)

    前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 v ...

  2. 微信小程序web-view的简单思考和实践

    微信小程序的组件web-view推出有一段时间了,这个组件的推出可以说是微信小程序开发的一个重要事件,让微信小程序不会只束缚在微信圈子里了,打开了一个口子,这个口子或许还比较小,但未来有无限可能. 简 ...

  3. 微信小程序_(视图)简单的swiper容器

    swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...

  4. 微信小程序のwxs语言

    一.wxs介绍 wxs是微信小程序自身的脚本语言,用来过滤和计算.wxs可以通过文件可模块标签来定义 文件需要.wxs后缀文件 二.实例 <wxs module="test1" ...

  5. 微信小程序之最简单的Demo设计使用

    这个小Demo,代码量不多:导航样式.View.Text.点击.JS交互的使用,主要是理解每个后缀文件的功能,然后才能更好的使用开发.......(下面代码和源代码没差别,实在想要的请留言,谢谢... ...

  6. 微信小程序网络封装-简单高效

    废话引言 小程序虽然出世很久了,但一直没怎么接触到小程序开发.吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为IT一员就自愿加入了这个小程序开发小组中.虽然小程序面向的是前端工程师,但作为移动 ...

  7. 微信小程序_(map)简单的小地图

    map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, lati ...

  8. 微信小程序_(视图)简单的scroll-view容器

    scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许 ...

  9. 微信小程序注册和简单配置

    微信小程序注册 1.直接搜索微信小程序,按照流程进行注册 2.如果有微信公众号,可以在公众号内部点小程序,进入注册流程 小程序中的概念 开发设置 在开发设置中获取AppID和AppSecret App ...

随机推荐

  1. DbParameter关于Like查询的传参数无效问题

    用传参方式模糊查询searchName 按常规的思路,我们会这样写 ,代码如下: String searchName ="Sam"; String strSql = "s ...

  2. ServiceStack JWT 准备

    ServiceStack JWT设置 ServcieStack 自带的验证授权模块使用 sql server存储,所以我们第一步需要配置数据库的一些选项 container.Register<I ...

  3. Java调用Http/Https接口(5)--HttpAsyncClient调用Http/Https接口

    HttpAsyncClient是HttpClient的异步版本,提供异步调用的api.文中所使用到的软件版本:Java 1.8.0_191.HttpClient 4.1.4. 1.服务端 参见Java ...

  4. 2019 汇量科技java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.汇量科技等公司offer,岗位是Java后端开发,因为发展原因最终选择去了汇量科技,入职一年时间了,也成为了面 ...

  5. 04、MySQL—数据基础操作

    1.插入操作 本质含义:将数据以SQL的形式存储到指定的数据表(字段)里面 基本语法:向表中指定字段插入数据 Insert into 表名[(字段列表)] values(对应字段列表) 范例:向表中插 ...

  6. jdk命令行工具系列

    虚拟机堆转储快照分析工具使用jmap等方法生成java的堆文件后jhat:虚拟机堆转储快照分析工具 导出程序执行的堆信息 jps jps -l jmap -dump:format=b,file=D:/ ...

  7. wamp环境下配置https证书后,网站内容访问受限

    wamp环境下配置https证书后,网站内容访问受限,点击首页链接标签后报错,大致意思是没有权限进行操作. 解决方法:打开apache的http.conf(位置大致如下:项目所在目录\bin\apac ...

  8. Caffeine用法

    Caffeine是使用Java8对Guava缓存的重写版本,在Spring Boot 2.0中将取代Guava.如果出现Caffeine,CaffeineCacheManager将会自动配置.使用sp ...

  9. 笔谈 cocoapods的安装与使用

    因为要重构播放器库,所以就需要参考网上的开源项目,在播放器开源项目这块,kxmovie开源项目是值得参考的一个项目.在github下载下来后,运行该工程,发现其用到了cocoapods来管理第三方库, ...

  10. 【转】移植vsftpd到arm linux

    vsftpd即very secure FTP daemon(非常安全的FTP进程),是一个基于GPL发布的类UNIX类操作系统上运行的服务器的名字(是一种守护进程),可以运行在诸如Linux.BSD. ...