一、数据绑定
1、普通写法
2、组件属性
3、bool类型
demo1中demo.js中的data放的是初始化数据
// pages/demo1/demo1.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:"测试绑定数据",
number:1000,
bool:false,
user:{
age:10,
name:"张三"
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})demo1中demo1.wxml将demo1.js中的初始化数据取出
<!--pages/demo1/demo1.wxml-->
<!--text相当于h5中的span标签，是一个行内标签
view相当于h5中的div标签，是一个块元素
checkbox复选框
-->
<text>111</text>
<view>123</view>
<!--取js文件中数据使用两个大括号，大括号和引号中间不能加空格-->
<view>获取字符串--->{{msg}}</view>
<view>获取数字--->{{number}}</view>
<view>获取boolean--->{{bool}}</view>
<view>查看user对象类型--->{{user}}</view>
<view>查看user对象年龄属性--->{{user.age}}</view>
<view>查看user对象名字属性--->{{user.name}}</view>
<view data-num="{{number}}">标签中属性使用</view>二、运算
1、三元运算
2、算术运算
3、逻辑判断
4、字符串运算
5、注意
<!--
运算=》表达式
1、可以在大括号中假如表达式
2、表达式：指的是一些简单运算、数字运算、字符串拼接、逻辑运算等
2.1数字加减
2.2字符串拼接
2.3三元表达式
3、语句
3.1复杂的代码段
3.1.1 if-else
3.1.2 switch
3.1.3 do-while
3.1.4 for
-->
<!--数字-->
<view>{{1+1}}</view>
<!--字符串拼接-->
<view>{{"1"+"1"}}</view>
<!--三元运算
三元运算语法：如果前面表达式为true则将冒号前面的值显示出来，如果为false则显示冒号后面的值
在这里10除以2余数为0所以将偶数显示出来
%为取余数
/为取商
-->
<view>{{10%2==0?"偶数":"奇数"}}</view>三、列表渲染
1、wx:for
2、bolck
demo.js
// pages/demo1/demo1.js
Page({
/**
* 页面的初始数据
*/
data: {
list: [
{
name: "张三",
age: 19
},
{
name: "李四",
age: 20
}
],
user:{
name:"测试对象的值",
age:12
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})demo.wxml
<!--
列表循环
1、x:for语法
wx:for="{{数组或者对象}}" wx:for-item="循环项名称" wx:for-index="循环项索引"
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名
2、wx:key="唯一值"用来提高列表渲染的性能
2.1wx：key绑定一个普通字符串的时候那么这个字符串必须是循环数组中的对象的唯一属性
2.2wx：key="*this"表示该数组是一个普通数组 *this表示循环项
例如[1,2,3]
3、当出现数组嵌套循环时候要注意绑定的名称不能重复 wx:for-item="循环项名称" wx:for-index="循 环项索引"
4、默认情况下我们不写wx:for-item="循环项名称" wx:for-index="循环项索引"，系统也会把循环项的 名称和索引名称定义为 item 和 index 只有一层循环时可以省略
对象循环：
1、x:for语法
wx:for="{{对象}}" wx:for-item="对象值" wx:for-index="对象属性"
2、循环对象时候最好把item和index的值进行修改
wx:for-item="value" wx:for-index="key"
bolck标签
1、占位符标签
2、写代码时候可以看到
3、页面渲染时会移除掉
-->
<!-- 列表循环 -->
<view>
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="name">
<view>{{index}}</view>
<view>{{item.name}}</view>
</view>
</view>
<!-- 对象循环 -->
<view>
<view wx:for="{{user}}" wx:for-item="value" wx:for-index="key" wx:key="name">
<view>{{key}}</view>
<view>{{value}}</view>
</view>
</view>四、条件渲染
1、wx:if
2、hidden
demo.wxml
<!--
条件渲染
1、wx:if="表达式{{true/false}}" 为true标签显示 为false标签隐藏
2、嵌套if结构
3、hidden
在标签上加hidden属性
hidden="{{true}}"
4、什么场景下用哪个
1、当标签不是频繁切换显示优先使用 wx:if
直接把标签从页面结构移除
2、当标签频繁切换显示优先使用 hidden
通过添加样式隐藏和显示标签
3、hidden不要和样式中display一起使用
-->
<!-- 条件渲染 -->
<view>
<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>
</view>
<!-- 嵌套条件渲染 -->
<view>
<view wx:if="{{false}}">1</view>
<!--elif 相当于else if-->
<view wx:elif="{{false}}">2</view>
<view wx:else>3</view>
<!--hidden-->
<view hidden="{{true}}">true</view>
<view hidden="{{false}}">false</view>
</view>
来源：oschina
链接：https://my.oschina.net/u/3535099/blog/3161945