一、插值{{}}語法

? ? ? ? 1、內(nèi)容綁定

<view>{{iptValue}}</view>

? ? ? ? 2、屬性綁定

<switch checked="{{true}}" />

Page({
    data: {
        iptValue: '123'
    }
})

?

二、簡易雙向數(shù)據(jù)綁定

? ? ? ? model:value：支持雙向數(shù)據(jù)綁定

? ? ? ? 注：僅input和textarea支持，qie只支持data的一級數(shù)據(jù)，不支持對象格式的數(shù)據(jù)綁定

<input type="text" placeholder="請輸入內(nèi)容" model:value='{{iptValue}}'/>

?

三、條件渲染

? ? ? ? 1、條件渲染--wx:if &?wx:else

????????wx:if &?wx:else相當(dāng)于vue中的v-if & v-else；wx:else不可單獨(dú)使用，需跟在wx:if后使用。

<view class="welcome">
  <text wx:if="{{ isLogin }}">大師兄</text>
  <text wx:else>游客</text>你好:
</view>

  data: {
    isLogin: true,
  }

?

? ? ? ? 2、條件渲染--hidden?

? ? ? ? hidden相當(dāng)于vue中的v-show，當(dāng)hidden屬性值為true時，頁面顯示，反之，則不顯示。

<view class="loading">
  <text hidden="{{ !loaded }}">正在加載...</text>
</view>

  data: {
    loaded: true
  }

?

?四、列表渲染

? ? ? ? 1、wx:for循環(huán)列表

? ? ? ? 默認(rèn)index和item是數(shù)組訪問變量（index是索引，item是數(shù)組項(xiàng)）。

????????注意：wx:key未指定值會有警告，使用時不使用插值語法，訪問對象為對象時，只用寫屬性名。

<view class="students">
  <view class="item">
    <text>序號</text>
    <text>姓名</text>
    <text>年齡</text>
    <text>性別</text>
    <text>級別</text>
  </view>
  <view class="item" wx:for="{{students}}" wx:key="id">
    <text>{{item.id}}-{{index}}</text>
    <text>{{item.name}}</text>
    <text>{{item.age}}</text>
    <text>{{item.gender}}</text>
    <text>{{item.level}}</text>
  </view>
</view>

data: {
    students: [
      { id: 1, name: '賀洋', age: 20, gender: '男', level: '菜鳥' },
      { id: 2, name: '唐剛', age: 18, gender: '女', level: '笨鳥' },
      { id: 3, name: '常超', age: 20, gender: '女', level: '老鳥' },
    ],
  }

?

? ? ? ? 2、wx:for循環(huán)簡單數(shù)組

? ? ? ? 注意：wx:key未指定值會有警告，使用時不使用插值語法，訪問對象為簡單單元時，使用“*this”

<view class="history">
  <text wx:for="{{history}}" wx:key="*this">{{item}}</text>
</view>

data: {
    history: ['蘋果', '華為', 'OPPO', '三星'],
  }

?

? ? ? ? 3、wx:for 的item和index改名

????????wx:for?嵌套時?item?和?index需要修改名稱，防止命名重復(fù)，取值錯誤。

? ? ? ? 語法：wx:for-item='名稱'

? ? ? ? ? ? ? ? ???wx:for-index='名稱'

<view class="students">
  <view class="item">
    <text>序號</text>
    <text>姓名</text>
    <text>年齡</text>
    <text>性別</text>
    <text>級別</text>
  </view>
  <view class="item" wx:for="{{students}}" wx:key="id" wx:for-item='stu' wx:for-index='idx'>
    <text>{{stu.id}}-{{idx}}</text>
    <text>{{stu.name}}</text>
    <text>{{stu.age}}</text>
    <text>{{stu.gender}}</text>
    <text>{{stu.level}}</text>
  </view>
</view>

?文章來源地址http://www.zghlxwxcb.cn/news/detail-833479.html

到了這里，關(guān)于小程序--模板語法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！