1.基础知识

文章目录
         1.数据绑定

         2.运算

         3.数组/对象的循环

         4.条件渲染

         5.事件绑定
1.数据绑定
示例：demo03.js

Page({
  data: {
    msg:"hello wx",
    num:1000,
    isboy:false,
    person:{
      age:20,
      height:182,
      weight:74,
      name:"张三"
    },
    isChecked:false
  }
  });

demo03.wxml

<!-- text标签相当于span，行内元素不会换行 -->
<!-- view相当于div，会换行 -->
<text>1</text>
<text>2</text>
<view>3</view>
<view>4</view> 

<!-- 字符串 -->
<view>{{msg}}</view>
<!-- 数字类型 -->
<view>{{num}}</view>
<!-- 布尔类型 -->
<view>是否为男:{{isboy}}</view>
<!-- 对象 -->
<view>{{person.name}}</view>
<view>{{person.height}}</view>
<view>{{person.age}}</view>
<view>{{person.weight}}</view>

<!-- 在标签的属性中使用 -->
<view data-num="{{num}}">  自定义属性</view>

<!-- 使用布尔类型充当属性,checked为选上
    注意：字符串和花括号之间不能存在空格，否则无法识别
-->

<view>
  <checkbox checked="{{isChecked}}"></checkbox>

</view>

2.运算
可在{{ }}内实现数字的基本运算、字符串的拼接、三元运算符

<view>{{1+2}}</view>
<view>{{'1'+'2'}}</view>
<view>{{1+2>1?'大于':'不大于'}}</view>

结果应为

3
12
大于

3.数组/对象的循环

list:[
      {
        id:0,
        name:'张三'
      },
    
      {
        id:1,
        name:'法外狂徒'
      }
    
    ]
  }

<!-- 列表循环 <wx:for>="{{数组/对象}}" wx:for-item="循环项的名称"
wx:for-index="循环项的索引"  
wx:key 绑定一个普通字符串时，那么这个字符串名称一定是循环数组中的对象的唯一属性
-->
<view>
  <view wx:for="{{list}}" 
  wx:for-item="value" 
  wx:for-index="key"
  wx:key="id">
    索引：{{key}}
    --
    值：{{value.name}}

  </view>
</view>

4.条件渲染

 <!-- 条件渲染
    1. wx:if="{{true/false}}"
        wx:if
        wx:elif
        wx:else
    2.hidden
     2.1在标签中加hidden  <view hidden >隐藏</view>
     2.2 hideen="{{true}}"
  -->
  
	<view>
    <view>条件渲染</view>
    <view wx:if="{{true}}">显示</view>
    <view wx:if="{{false}}">隐藏</view>
    </view>

    <view hidden >隐藏</view>
    <view hidden="{{true}}">隐藏</view>

5.事件绑定
在text输入框输入值时，使num的值也随输入值改变

Page({
data: {
   num:0
 },
 //输入框的input事件的执行逻辑
 handleInput(e){
   //console.log("e");
   this.setData({
     num:e.detail.value
 })
 }
})

<!-- 给input标签绑定 input事件,
   通过事件源对象来获取输入框的值 e.detail.value
   把输入框的值赋值到data中 
    this.setData({
       num:e.detail.value
   })
-->

<input type="text" bindinput="handleInput"/>
<view>
 {{num}}
</view>

加减按钮的事件

// 加一个点击事件bindtap,不能直接传参，要通过自定义属性传参
<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap"data-operation="{{-1}}">-</button>
<view>
  {{num}}
</view>

// pages/demo04/demo04.js
Page({
data: {
   num:0
 },
 //输入框的input事件的执行逻辑
 handleInput(e){
   //console.log("e");
   this.setData({
     num:e.detail.value
 })
 },
 //加减按钮的事件
 handletap(e){
   //console.log(e);
   const operation = e.currentTarget.dataset.operation;
   this.setData({
     num: this.data.num+operation
   })
 }
 })

其它基础知识见文档