微信小程序学习-02-wxml

微信小程序组件标签

• view
  • 与html中div类似

<view>
  hello world || {{msg}}
  <view>num:{{num}}view>
  <view>isBoy:{{isBoy}}view>
  <view>person.name:{{person.name}} -- person.heigth : {{person.height}}view>
  <view data-id="{{title}}">titleview>
  <view><checkbox checked="{{true}}">checkbox>view>
view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:"hello world home",
    num:11000,
    isBoy:true,
    person:{
      name:"xx",
      height:165
    },
    title:"这是新建页面"
  }
})

其他请查看文档

运算

<view><checkbox checked="{{isCheck?true:false}}">checkbox>view>


<view>{{num+10}}view>
<view>{{num1+num2}}view>


<view>{{str1+str2}}view>


<view><checkbox checked="{{length>5}}">checkbox>view>

列表渲染

• wx:for
  • wx:for-item//指定数组当前元素变量名item
  • wx:for-index//指定数组当前下标的变量名index

Page({
	data:{
		arr:["苹果","香蕉","西瓜"],
		person:{
			name:"xx",
			heigth:180
		}
	}
})

<view>
	<view wx:for="{{arr}}" wx:key="{{index}}">
		{{index}}:{{item}}
	view>
	<view wx:for="{{person}}" wx:key="{{index}}" >
		{{index}}:{{item}}
	view>
	<view wx:for="{{person}}" wx:key="{{index}}" wx:for-index="key">
		{{key}}:{{item}}
	view>
	
	<block wx:for="{{person}}" wx:key="{{index}}" >
		{{index}}:{{item}}
	block>
view>