标签认知
text 相当于前端中span 行内元素
view 相当于前端中 div元素
对于page.js文件 ,需要在页面上指定page,否则报错
数据绑定
动态绑定
wxml
<view>{{msg}}</view>
<view>{{number}}</view>
<view>{{isTrue}}</view>
js
/**
* 页面的初始数据
*/
data: {
msg:"hello world",
number:123456,
isTrue:true
},
对于对象的引用
wxml
<view>{{}}</view>
<view>{{person.age}}</view>
<view>{{person.isBoy}}</view>
js
data: {
msg:"hello world",
number:123456,
isTrue:true,
person:{
name:"zs",
age:18,
isBoy:true
}
},
自定义属性
<view><checkbox checked="{{person.isBoy}}"></checkbox></view>
效果
运算
page.js
number: {
a:1,
b: 2,
c:6
}
计算
加减乘除
<view>{{number.a+1}}</view>
逻辑判断
<view>{{number.a > 5}}</view>
字符串
<view>{{number.a +"展示"}}</view>
列表渲染
列表循环
wx:for="{{数组或者对象}}" wx:for-item=“循环项的名称” wx:for-index=“循环项的索引”
wx:key=“唯一的值” 用来提高列表渲染的性能
list:[
{ id:0,
name:"zs"
},
{ id:1,
name:"ls"
},
{
id:2,
name:"ws"
}
]
<view>
<view wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
>
索引: {{index}}
==============
值:{{item.name}}
</view>
</view>
wx:key
绑定一个普通字符串的时候,那么这个字符串名称肯定是循环数组中对象的唯一属性
wx:key="*this"
.*this ，它的意思是item 本⾝，*this代表的必须是唯⼀的字符串和数组
当出现循环嵌套时 wx:for-item=“item” wx:for-index=“index” 不能重名,对于只有单层循环的现象,可以省略
block
渲染⼀个包含多节点的结构块?block最终不会变成真正的dom元素
<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
<view> {{index}}: </view>
<view> {{item}} </view>
</block
条件渲染
if else
在框架中，使⽤ " wx:if="{{condition}}" 来判断是否需要渲染该代码块
<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>
hidden
<view hidden="true">
if 与hidden使用场景比较
1.当标签不是频繁显示,优先使用wx:if 底层是将标签从页面结构直接移除掉
2,频发切换显示时,优先使用hidden,通过添加样式方式来切换显示
