【小程序】wxml中通过For循环显示js数据(图文+完整代码)
2023-09-11 14:15:10 时间
data.wxml代码
<!--pages/js/data.wxml-->
<view style="padding-bottom: 20px;">---- 【for循环遍历数组】----</view>
<view wx:for="{{ListArr}}">{{index}}.{{item}}
</view>
<view style="margin-top: 20px;margin-bottom: 20px;">------【for循环遍历数组(不换行)】-----</view>
<block view wx:for="{{ListArr}}">
<text space="nbsp">{{item}} | </text>
</block>
<view style="margin-top: 20px;margin-bottom: 20px;">--------【for循环遍历obj】---------------------</view>
<block view wx:for="{{ListArr}}">
<text space="nbsp">{{item}} | </text>
</block>
<view wx:for="{{listObj}}">
<text space="nbsp">{{item.name}} | </text>
<text space="nbsp">{{item.sex}} | </text>
<text space="nbsp">{{item.old}} | </text>
</view>
<view style="margin-top: 20px;margin-bottom: 20px;">--------【for循环99乘法口诀】----------</view>
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<block wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</block>
</view>
</view>
data.js
// pages/js/data.js
Page({
/**
* 页面的初始数据
*/
data: {
title: "数据绑定",
ListArr: ["姓名", "性别", "年龄"],
obj: { "name": "张飞", "sex": "男", "old": 20 },
listObj: [
{ "name": "吕布", "sex": "男", "old": 20 },
{ "name": "貂蝉", "sex": "女", "old": 18 },
{ "name": "关羽", "sex": "男", "old": 23 }
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
相关文章
- js 生成4位随机数及Js知识汇总
- java +selenuim使用js显示控件
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- js跳出循环的方法区别( break, continue, return ) 及 $.each 的(return true 和 return false)
- 30dwr - engine.js 功能(选项说明)
- js图片时间翻转
- JS——循环语句
- jQuery插件EasyDrag轻松实现JS拖动的效果
- 【HarmonyOS】【JS】鸿蒙Js camera怎么拍照并使用image显示出来
- JS模式:jq中简单的模式--》采摘自js设计(tomxu_version)
- JS手写实现深拷贝(考虑循环引用)
- Dynamic CRM 2013学习笔记(十六)用JS控制Tab可见,可用
- JS之for循环面试题
- JS高阶---闭包(循环遍历+监听)
- 《Node.js区块链开发》——1.3 加密货币就是货币
- 前后端加密解密 【JS加密模块(md5 、 crypto 、 crypto-js、jsencrypt) python RSA加密解密(pycryptodome )模块安装与使用】
- JS键盘事件获取键盘码
- Js 获取当前时间
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
- js对象数组按照多个字段进行排序
- JS魔法堂:LINK元素深入详解
- 鸿蒙-webview的使用和JS交互(附源码)
- 【HarmonyOS】【JS】 鸿蒙js开发使用div自带的scroll,滑动条拉不到最下面?
- js 模拟鼠标事件
- JS 转Boolean的两张方法
- 高效的JS数组操作
- Vue.js 条件与循环