关于javascript:微信小程序基础开发二模板语法

数据绑定

.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:"hello mina",
    num:10000,
    isGirl:false,
    person:{
         age:78,
         height:188,
         weight:166,
         name:"迷人软"
    },
    isChecked:false
  },
})

.wxml

<!-- 1 字符串 -->
<view>{{msg}}</view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 布尔类型 -->
<view> 是否是伪娘：{{isGirl}}</view>
<!-- 4 object 类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!-- 5 在标签的属性中应用 -->
<view data-num="{{num}}"> 自定义属性 </view>
<!-- 6 应用 bool 类型充当属性  checked
        1、字符串和花括号之间肯定不要存在空格  否则会导致辨认失败 -->
<checkbox  checked="{{isChecked}}"></checkbox>

运算

.wxml

<!--  运算  表达式 
        1、数字的加减
        2、字符串拼接
        3、三元表达式 -->

<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{10%2===0 ? '偶数' : '奇数'}}</view>

列表渲染

• 数组循环

<!-- 数组循环 
       1、wx:for="{{数组或对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
       2、wx:key="惟一的值"  用来进步列表渲染的性能
         1、绑定一个一般字符串时，这个字符串名称必定是循环数组中对象的惟一属性
         2、wx:key="*this"  示意数组是一个一般数组  *this 示意是循环项
           [1,222,322,45]
           ["1","adx","aaa3","aeerr"]
       3、当呈现数组的嵌套循环的时候  要留神以下绑定的名称不要重名
           wx:for-item="item"   wx:for-index="index"
       4、只有一层循环(wx:for-item="item" wx:for-index="index") 能够省略, 小程序会默认设置成 item 和 index
-->

<view>
<view> 数组循环 </view>
 <view 
 wx:for="{{list}}" 
 wx:for-item="item" 
 wx:for-index="index"
 wx:key="id"
 >
     索引：{{index}}
     --
     值：{{item.name}}
    </view>
</view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:0,
        name:"路飞"
      },
      {
        id:1,
        name:"乔巴"
      },
      {
        id:2,
        name:"索隆"
      }
    ]
  },
})

• 对象循环

 <!-- 对象循环
        1、wx:for="{{对象}}"   wx:for-item="对象的值"  wx:for-index="对象的属性"
        2、循环对象时, 最好更改 item 和 index 的名称
             wx:for-item="value"   wx:for-index="key"
 -->
 <view>
 <view> 对象循环 </view>
 <view 
 wx:for="{{person}}"
 wx:for-item="value"  
 wx:for-index="key"
 wx:key="age">
      属性：{{key}}
      --
      值：{{value}}
    </view>
</view> 

Page({
  /**
   * 页面的初始数据
   */
  data: {
    person:{
         age:78,
         height:188,
         weight:166,
         name:"迷人软"
    }
  },
})

• block 标签

<block
 wx:for="{{list}}" 
 wx:for-item="item" 
 wx:for-index="index"
 wx:key="id"
 class="my_list"
 >
     索引：{{index}}
     --
     值：{{item.name}}
    </block>

条件渲染

• wx:if

<!--
    1、wx:if="{{true/false}}" 
    2、if,else,if else
      wx:if
      wx:elif
      wx:else
-->
<view>
    <view>wx:if</view>
    <view wx:if="{{true}}"> 显示 </view>
    <view wx:if="{{false}}"> 暗藏 </view>

    <view wx:if="{{false}}">aaa</view>
    <view wx:elif="{{false}}">bbb</view>
    <view wx:else>ccc</view>

</view>

• hidden

<!-- 
    hidden
      1、在标签上间接退出属性 hidden
      2、hidden="{{true}}"
 -->
 <view>
    <view>-----------------------</view>
    <view>hidden</view>
    <view hidden >hidden</view>
    <view hidden="{{true}}">hidden</view>  
    <view hidden="{{false}}">hidden</view>
</view>

场景如何抉择？

1、当标签不是频繁的切换显示，优先应用 wx:if
wx:if：间接将标签从页面构造中移除
2、当标签频繁的切换显示的时候，优先应用hidden
hidden：通过增加款式的形式来切换显示(display:none;)
因而hidden 属性不要和 display 一起应用