微信小程序开发之模板语法（四）

1.数据绑定

声明数据（.js文件）（在页面对应的js文件，数据定义到data对象中）

  data:{
    info:'Hello World!'
  },

渲染数据（.wxml文件）（把data中的数据绑定到页面中渲染，使用mustache双大括号将变量包起来，也叫插值表达式）

<view>{{info}}</view>

mustache语法应用场景

 绑定内容

        动态绑定内容

         如上演示

        动态绑定属性

/*js文件*/
Page({
  data:{
    imgSrc:'http://www.ithema.com/images/logo.png'
  },
})

/*wxml文件*/
<image src="{{imgSrc}}"></image>

        三运算

在调试器下面的APPData可以查看数据

/*js文件*/
Page({
  data:{
  randomnumber1:Math.random()*10
  },
})

/*wxml文件*/
<view>{{randomnumber1 >=5 ?'数字大于或等于5':'数字小于5'}}</view>

 2.事件绑定

 

 bindtap语法格式

通过bindtap，为组件绑定tap事件。在js文件对应事件的处理函数，事件参数通过形参event接收

/*wxml文件*/
<button type="primary" bindtap="Handtap">按钮</button>

/*js文件*/
Page({
  Handtap(e){
  console.log(e)
},
})

data数据赋值

 利用this.setdata()给页面的data数据重新赋值

/*wxml文件*/
<button type="primary" bindtap="CountChange">+1</button>

/*js文件*/
Page({
  data:{
    count : 0
  },

  CountChange(e){
    console.log('ok')
    this.setData({
      count:this.data.count+1
    })
},
})

事件传参

不能一边绑定事件传递函数一边传递参数，而且如果是数值，则需要使用mustache{{}}，否则输出是文本

/*wxml文件*/
<button type="primary" bindtap="bntTap2" data-info="{{2}}">+2</button>

/*js文件*/
Page({
  data :{
    count :0
  },

  bntTap2(e){
    this.setData({
      count:this.data.count+e.target.dataset.info
    })
  },
})

bindinput语法格式

通过bindinput为文本框绑定输入事件，在js文件中定义事件处理函数

/*wxml文件*/
<input bindinput="inputHand"></input>

/*js文件*/
Page({
  inputHand(e){
    console.log(e.detail.value)
  }
})

3.实现文本框与data之间的数据同步

在完成这一步的时候出现了一个致命的错误，就是将js文件和wxml文件内容写反了，这个问题在之前的学习中也出现过，但是一直没注意，这是个很基本的错误。

实现的功能：将msg中的数据显示出来，并且当输入文本框更改数据时，监控的数据也会发生改变

/*wxml文件*/
<input value="{{msg}}" bindinput="inputHander"></input>

/*js文件*/
Page({
  data:{
     msg: '你好'
  },

  inputHander(e){
    this.setData({
      msg : e.detail.value
    })
  }
})

/*wxss文件*/
input{
  border: 1px solid #eeeeee;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}

4.条件渲染

/*wxml文件*/
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>其他</view>

/*js文件*/
Page({
  data:{
     type: 1
  },
})

hidden 

<view hidden="{{flag}}">显示隐藏</view>

block

不是一个组件，只是一个包裹性质的容器，不会在页面中有任何的渲染。用于一次性控制多个组件的显示和隐藏。 注意TRUE和FALSE用mustache格式。

<block wx:if="{{false}}">
  <view>view1</view>
  <view>view2</view>
</block>

wx:if和hidden的区别

wx:if在false下隐藏，hidden在true下隐藏

5.列表渲染 

wx:for  循环渲染重复组件结构，索引用index，当前循环项用item。（index和item也可以更改）

/*wxml文件*/
<view wx:for="{{arr1}}">
  索引项：{{index}}，item项：{{item}}
</view>

/*wxml文件*/
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itm">
  索引项：{{idx}}，item项：{{itm}}
</view>

使用key值可以提高渲染效率，一般可以用index当做key。

wx:for需要mustache，wx:key不需要mustache。

/*wxml文件*/
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

/*js文件*/
Page({
  data:{
    userList:[
      {id:1, name:'小小'},
      {id:2, name:'中中'},
      {id:3, name:'大大'}
    ]
  }
})