微信小程序开发2——数据绑定、控制属性

数据绑定

index.wxml

<!--index.wxml-->
<view class="container"><!-- {{ }}  小胡子语法  专门用于输出逻辑层暴露的数据--><text>{{message}}</text><!-- input 默认是没有边框样式的 --><!-- mustache 可以作用在元素的  内容 和 属性 上 --><input value="{{message}}"></input><input value="{{message}}dsihgfrug"></input><text>{{1+1}}</text><text>{{message+1}}</text><!-- 一般情况下，属性值最好用双引号引起来，属性值最好不要省略 --><checkbox checked="true"></checkbox><checkbox checked="checked"></checkbox><checkbox checked></checkbox><!-- 在小程序的wxml中属性的值 如果只是在双引号内部  它永远是字符串 --><!-- 解决方法是借助于小胡子语法 --><!-- mustache 可以用于申明有类型的值 --><checkbox checked=""></checkbox><checkbox checked="dsfijri"></checkbox><checkbox checked="false"></checkbox><checkbox checked="{{false}}"></checkbox><text>{{foo.addPostfix(message)}}</text>
</view><!-- wxs标签 类似于 html中的 script标签 ，可以定义一些行内脚本--><wxs module="foo">//这里可以导出一个对象，这个对象可以直接在界面上使用 //这里的代码必须遵循 common js 规范 module.exports={addPostfix:function(input){return input+' wxs'}}
</wxs>

index.js

//index.js
//获取应用实例
const app = getApp()Page({//这个对象里面的所有属性都可以在界面中访问到// 在 data 中只能暴露数据成员data:{message:'hello world',}
})

控制属性

cond.js文件

Page({data:{isLoading:true},onReady(){setTimeout( () => {this.setData({isLoading:false})},2000)}
})

cond.wxml文件

<!--pages/cond/cond.wxml-->
<view wx:if="{{isLoading}}"><text>Loading……</text>
</view>
<!-- <view wx:elif=""></view> -->
<view wx:else><text>load done</text>
</view>

cond.wxml文件又一个版本

<!--pages/cond/cond.wxml-->
<view wx:if="{{isLoading}}"><text>Loading……</text>
</view>
<!-- <view wx:elif=""></view> -->
<view wx:else><text>load done</text>
</view><!-- 对于频繁需要被切换显示的元素  不应该使用 wx:if ,应该用hidden属性-->
<view hidden="{{!isLoading}}"><text>Loading……</text>
</view>
<view hidden="{{isLoading}}"><text>load done</text>
</view><view ><!-- block 只是一个包装元素，不会对界面的结构造成任何影响 --><block wx:if="{{isLoading}}"><text >hello</text><text >world</text></block><text>不要影响我</text>
</view><view><text wx:if="{{isLoading}}">hello</text><text wx:if="{{isLoading}}">world</text>
</view>

each.wxml

<!--pages/each/each.wxml-->
<view wx:for="{{students}}" wx:for-item="s" wx:for-index="i" wx:key="aaa">
<!-- {{index}} 拿到当前遍历的下标 --><!-- <text>{{index}}</text> --><text>{{i}}</text><text>name:{{s.name}}</text><text>age:{{s.age}}</text>
</view>

each.js

// pages/each/each.js
Page({/*** 页面的初始数据*/data: {students:[{id:1,name:'止兮',age:18},{id:2,name:'苍凌',age:19},{id:3,name:'瑾修',age:20},{id:4,name:'小草',age:17}]}
})

each.wxml

<!--pages/each/each.wxml-->
<view><view wx:for="{{students}}"><checkbox></checkbox><text>{{item.name}}</text></view>
</view>
<button bindtap="addItemHandle">add</button>

each.js

// pages/each/each.js
Page({/*** 页面的初始数据*/data: {students:[{id:1,name:'止兮',age:18},{id:2,name:'苍凌',age:19},{id:3,name:'瑾修',age:20},{id:4,name:'小草',age:17}]},// 页面对象上除了 生命周期的钩子函数之外，可以定义任何其他的函数，// 这些函数可以作为视图层(界面)元素的事件处理函数addItemHandle(){const students=this.data.studentsstudents.push({ id: Math.random(), name: '小草' + Math.random(), age: 17})this.setData({students})}
})

each.wxml

<!--pages/each/each.wxml-->
<view><!-- wx:key 属性值  写的是 遍历的数据单项属性名称 --><!--如果没有属性的话， 可以通过  *this  这个保留值 去指定当前被遍历的元素 --><!-- <view wx:for="{{students}} " wx:key="id">  有了一个空格，变成了字符串的拼接，界面就变得很乱 --><view wx:for="{{students}}" wx:key="id"><checkbox></checkbox><text>{{item.name}}</text></view>
</view>
<text wx:for="foo">--{{item}}--</text>
<button bindtap="addItemHandle">add</button>

each.js

// pages/each/each.js
Page({/*** 页面的初始数据*/data: {students:[{id:1,name:'止兮',age:18},{id:2,name:'苍凌',age:19},{id:3,name:'瑾修',age:20},{id:4,name:'小草',age:17}],nums:[1,2,3,4,5,6]},// 页面对象上除了 生命周期的钩子函数之外，可以定义任何其他的函数，// 这些函数可以作为视图层(界面)元素的事件处理函数addItemHandle(){// const students=this.data.students// students.push({ id: Math.random(), name: '小草' + Math.random(), age: 17})const students = [{ id: Math.random(), name: '小草' + Math.random(), age: 17 }].concat(this.data.students)this.setData({students})}
})

微信小程序开发2——数据绑定、控制属性相关推荐

微信小程序开发之六 —— 数据绑定与列表渲染
文章目录学习前后数据分离数据类型组件属性数据绑定渲染对象类型数据列表渲染 wx:for wx:key 渲染一下电影列表学习前后上一篇:微信小程序开发之五 -- 体验WeUI 下一篇:微 ...
入门微信小程序开发(三)数据绑定的几种用法
一.数据绑定与书写HTML页面一样,小程序页面也只能通过多写多练提升.在构建完页面后就出现了一个问题,我们该如何获取组件元素让数据与之关联呢? 在网页开发中,我们同样使用JS操作DOM,包括数据渲染 ...
微信小程序开发的数据绑定和事件绑定
一.数据绑定 1.定义数据在页面对应的 .js(或 ts)文件中,把数据定义到 data 对象中即可: 2.Mustache 语法的格式(渲染数据) 把 data 中的数据绑定到页面中渲染,使用 M ...
微信小程序开发 Array对象的属性与方法
Array属性: length 设置或返回数组中元素的个数 Array 方法: concat():连接两个或更多的数组,并返回结果 join():把数组的所有元素放入字符串,并用指定的分隔符进行分隔 ...
NB-IOT专栏(QS-100模块二次开发）-onenet云平台+微信小程序实现下行数据控制设备开关
前言最近公司老总买了NB-IOT的模块,老总考虑到STM32芯片的价格涨的很快,而我们的内容做的不是很复杂,再加上支持一下本地企业,QS-100模块到价格超级实惠,决定使用QS-100模块作为通信模 ...
微信小程序开发笔记（四）数据绑定
参考教材:<微信小程序开发入门与实践> 雷磊前置知识:JavaScript,CSS 为了更好的学习后续知识,先来新建一个页面.(以下代码来自<微信小程序开发入门与实践>,下载 ...
微信小程序开发（2）_data属性
假设我们的环境都做好了,现在我们开始开发自己的小程序首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...
微信小程序js数组初始化_微信小程序开发之改变data中数组或对象的某一属性值...
前言:在小程序的开发中,我们在view中便利data中数组或对象时,很多情况下需要在js中动态改变数组或者对象中某一香的属性值. 效果图: 我给大家总结了案例如下: wxml如下: {{item.we ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...

微信小程序开发2——数据绑定、控制属性

数据绑定

控制属性

微信小程序开发2——数据绑定、控制属性相关推荐

最新文章

热门文章