注:主要内容摘抄微信官方开发文档 本人运行后加以修改 仅作为学习记录
index.js 中的内容
Page({
data: {
message: 'Hello World',
id:'0',
zhen:'true',
jia: 'false',
a: 1,
b: 2,
c: 3,
length:10,
name:'张三',
Object:{
value:'我是数据链接中的值'
},
array:['1','2','3'],
one:1,
arrayUser:[
{a:"张三"},
{a:"李四"}
]
}
})
index.wxml 中的内容
<!-- 赋值 在index.js内 -->
<view>{{message}}</view>
<view class="item-{{id}}"></view>
<!-- 数据链接 -->
<view>{{Object.value}}</view>
<!-- 数组 -->
<view>{{array[0]}}</view>
<!--********************************* 判断 ******************************* -->
<!-- 不能直接从js中获取值 这样相当于 wx:if="false" 其计算结果是一个字符串,转成 boolean才行 -->
<view wx:if="{{false}}">假</view> <view wx:if="{{true}}">真</view>
<checkbox checked="{{id}}">真</checkbox>
<checkbox checked="{{false}}">假</checkbox>
<!-- 逻辑判断 -->
<view wx:if="{{length < 5}}">我比5短</view>
<view wx:if="{{length > 5}}">我比5长</view>
<!-- 添加elif and else -->
<view wx:if="{{length<5}}">我小于5</view>
<view wx:elif="{{length<9}}">我小于九</view>
<view wx:else>我比他们都大</view>
<!-- block块 多判断 -->
<!-- <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性-->
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
<!--********************************* 运算 ******************************* -->
<!-- 三元运算 -->
<view hidden="{{zhen=='true' ? false : true}}"> zhen的值是{{zhen}}</view>
<view hidden="{{jia=='false' ? false : true}}"> jia 的值是{{jia}} </view>
<!-- 算数运算 -->
<view> {{a + b}} + {{c}} + d </view>
<!-- 字符串运算 -->
<view>{{"Hello"+name}}</view>
<!--********************************* 组合 ******************************* -->
<!-- 循环取值 默认变量名item代表当前循环的值 index为默认下标-->
<view wx:for="{{[one,2,3,4]}}">{{index}}--{{item}}</view>
<!--使用wx:for-item 可指定当前元素的变量名 使用wx:for-idnex可指定当前元素下标的变量名 -->
<view wx:for="{{arrayUser}}" wx:for-index="xiabiao" wx:for-item="yuansu">{{xiabiao}}---{{yuansu.a}}</view>
<!-- 循环嵌套 -->
<view class='jiujiu'>
<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">
<view wx:if="{{i<=j}}">
{{i}}*{{j}}={{i*j}}
</view>
</view>
</view>
</view>
<!-- 块 同时控制标签内的全部试图层或者其他层 算是大循环-->
<block wx:for="{{[1,2,3]}}">
<view>我是试图标签1 用来显示下标{{index}}</view>
<view>我是试图标签2 用来显示循环元素 {{item}}</view>
</block>
<!-- 当wx:for 的值为字符串时 会将字符串解析为字符串数组-->
<view wx:for="array"> <!--等同于 <view wx:for="{{['a','r','r','a','y']}}"> -->
{{item}} <!-- {{item}} -->
</view> <!-- </view> -->
<!--注意 花括号和引号之间如果有空格,将最终被解析成为字符串-->
<view wx:for="{{[1,2,3]}} "> <!-- 等同于 <view wx:for="{{[1,2,3] + ' '}}" > 会在个结果后加上空格 1 ,2 ,3 -->
{{item}}
</view>