【微信小程序】数据和事件渲染绑定和处理

数据获取

在index.ts/index.js中书写，定义数据info

Component({//相当于pages
  data: {
    info:'text'
  },
 }

在wxml中使用{{}}进行调用

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

结果：

三目运算和随机数； js:

  data: {
    rom:Math.random()*10//生成十以内的随机数
    rom2:Math.random().toFixed(2)//生成两位小数的随机数
  },

判断随机数是否大于五。 wxml:

<view> {{rom>=5 ? 1:0}}</view>

事件绑定：

target和currentTarget的区别：如果是view内有button,那么点击button时view也会做出反应，view的currentTarget收到的对象是view（当前组件）,target收到的对象是button。（事件发出者）

事件点击函数： 收到点击按钮的返回值 js界面：

  methods: {
      //定义按钮的事件处理函数
  
    btn(e: any){
    console.log(e)
  },

wxml界面：

<button type="primary" bindtap="btn">点击！</button>

调试器窗口：

为data中的数据赋值

在data中定义参数：

  data: {
    count:0,
  },

在js中的事件处理函数定义：

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

点击按钮：

<button type="primary" bindtap="CountChange">点击+1！</button>

执行结果：

小程序传参：

data-* 传参，info为参数名字，{{}}里面为数字，若不用这个传递的为字符串。

<button type="primary" bindtap="btn2"
data-info="{{2}}">点击事件传参！</button>

输出显示的数据在这里：

事件处理函数：

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

运行结果：

绑定文本框输入

wxml界面：

<input bindinput="bp"></input>
//使用bindinput绑定函数

ts界面：

  bp(e:any){
    console.log(e.detail.value)
  },

输入框：

调试台输出：

将文本框输入的文字存储在小程序中:

初始状态： 调试台：

输入字之后的效果：

调试台：

wxml代码：

<input  value="{{msg}}" bindinput="bp"></input>
//value用来传递信息，bindinput用来绑定文本存储

wxss界面：

input{
  border: 1px solid rgb(171, 140, 119);
  margin: 5px;
  padding: 5px;
  border: radius 3px; 
  color: #ecc776;
}

ts界面：

data: {
    msg:'我一直是仙术杯厨啊'
  },
  
Component({
  bp(e:any){
    console.log(e.detail.value)
    this.setData({
      msg:e.detail.value
    })
  },
})

条件渲染

在wxml：判断flag为1，输出第一个，为2，输出第二个，为其他输出第三个。

<!--index.wxml-->
<view wx:if="{{flag == 1}}">龍門大學附屬高中·陌域坍縮部</view>
<view wx:elif="{{flag == 2}}">仙术杯</view>
<view wx:else>绝密档案</view>

在js的data里输入：

  data: {
    flag:1,
  },

使用 < block > 进行多个组件的if判断：（block不会被渲染成新的组件）

true可以整体显示，flase可以整体隐藏

<block wx:if="{{true}}">
  <view>龍門大學附屬高中·陌域坍縮部</view>
  <view>仙术杯</view>
  <view>绝密档案</view>
</block>

hidden元素 显示为true为隐藏，false为显示

此时被隐藏。

<view hidden="{{true}}">龍門大學附屬高中·陌域坍縮部</view>

wx:if和hidden的对比：

列表渲染

for循环：index表示索引，a表示数组名，item为数组内内容 wxml页面：

<!--index.wxml-->
仙术杯队伍：
<view wx:for="{{a}}">
  {{index+1}}.{{item}}
</view>

js界面：

  data: {
    a:['龍門大學附屬高中·陌域坍縮部','冠军厨小队',"终始研究所","三鸽萧粽","女仆草莓酱香咖啡厅","余阳映白雪"]
  },

输出示例：

也可以把index和item的名字改了：

仙术杯队伍：
<view wx:for="{{a}}" wx:for-index="idx" wx:for-item="i" >
  {{idx+1}}.{{i}}
</view>

输出结果是一样的。

wx：key 用来提高渲染性能

wxml：使用key指定在js中命名的id

<view wx:for="{{a2}}" wx:key="id" >
  {{item.name}}
</view>

js：在data里：

    a2:[
      {id:1,name:'龍門大學附屬高中·陌域坍縮部'},
      {id:2,name:'冠军厨小队'},
      {id:3,name: "终始研究所"},
      {id:4,name: "三鸽萧粽"},
      {id:5,name:"女仆草莓酱香咖啡厅"},
      {id:6,name:"余阳映白雪"}],

输出结果：

前面的数组a也可以达到这种效果：

仙术杯队伍：

<view wx:for="{{a}}" wx:key="index" >
  {{item}}
</view>