WXML与js数据
一个示例对wxml和js里面的数据进行绑定和读取
<view><!--相当于div-->
<text>页面内数据</text>
<text>{{name}}</text><!--可以用双花括号从data里面取数据-->
<text>{{age+2}}</text><!--花括号可以放表达式;注意:比较过程中尽量不用浮点型的-->
<text>{{info.jingli}}{{jiangli[1]}}</text><!--复杂的东西可以一层层套,也可使用数组-->
</view>
//这里只放了data
data: {
name:"我是张三",
age:18,
info:{
jingli:"本科毕业"
},
jiangli:["一等勋章","二级勋章"]
}
效果
数组里面套对象、对象里面套数组和上面的同理
使用数组访问.内容{{arr[0].title}},{{obj.no1[0]}}
实际开发中复杂的数据结构是很常见的
条件渲染
wx:if语句
<view wx:if="{{false}}">
你是帅哥
</view>
<view wx:else>
你是美女
</view>
<!--结果:你是美女-->
注意:true或false要用括号括起来,否则当非空字符串处理,返回true
if,elif,else搭配使用
<view wx:if="{{age>18}}">
你是帅哥
</view>
<view wx:elif="{{age==18}}">
你是少年
</view>
<view wx:else>
你是美女
</view>
也可以对block块添加条件渲染
列表渲染
主要是对数组的操作
<view wx:for="{{['苹果','梨','香蕉']}}"><!--外面有双引号了,里面再用就冲突了,可以使用用单引号 -->
<text>{{index}}-----{{item}}</text>
</view>
效果:
也可以对数组下表和内容名字进行更新
<view wx:for="{{['苹果','梨','香蕉']}}" wx:for-item="con" wx:for-index="id">
<text>{{id}}-----{{con}}</text>
</view>
也可以使用data里面的数组
九九乘法表
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="row" class="row">
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="col" wx:if="{{col<=row}}" class="col">
{{col}}*{{row}}={{col*row}}
</view>
</view>
.row{
display: flex;
justify-content: flex-start;
font-size: 10px
}
.row .col{
width: 40px
}
效果
wx:key
警告里面写:列表渲染建议使用wx:key
什么时候用:数组内容会动态改变,要使用wx:key保持项目自己的特征和状态;不使用key的话会整个销毁再创建,导致性能下降
什么时候不需要:数组是静态的不需要改变,不关注顺序,就可以不适用
模板
新建一个page里面新建一个template
<template name="msg">
<view>
<text>你好</text>
<text>666</text>
</view>
</template>
在另一个wxml里面:
<import src="../temp/temp.wxml"></import>
<template is="msg"></template>
即可使用另一个模板
一般模板里面不放内容,内容可以由调用处传递
例如:
<template name="msg">
<view>
<text>{{info}}</text>
<text>{{us}}</text>
</view>
</template>
<import src="../temp/temp.wxml"></import>
<template is="msg" data="{{info:'今天晚上吃饭',us:'周杰伦'}}"></template>
include引入
和模板有点相似。但是include引入是直接性的引入,不需要填入动态数据;模板一般会传递数据。
如果一段代码不需要填入动态数据,则可以使用include。
<!--temp.wxml-->
<view>
<text>老铁</text>
</view>
<!--p.wxml-->
<include src="../temp/temp.wxml"></include>
输出结果:老铁
若想传入数据,可以直接在里面加:
<!--temp.wxml-->
<view>
<text>老铁</text>
<text>{{info}}</text>
</view>
<!--p.wxml-->
<include src="../temp/temp.wxml"></include>
//p.js
data: {
info:666
},