数据绑定

• 数据在本页面对应的脚本文件中定义
• 每个页面内置的内部状态变量webviewId记录是在几号webview中渲染

<view class="container">
  <text>本周推荐</text>
  <image src='{{thisWeekMovie.imagePath}}'></image>
  <text>{{thisWeekMovie.name}}</text>
  <text>点评：{{thisWeekMovie.comment}}</text>
  <!-- 数据绑定：{{变量名}} 变量名处可为式子-->
  <!-- <text>{{(score>=60)?"及格":"不及格"}}</text> -->
  <!-- <text>{{count}}</text> -->

</view>

Page({
  data:{
    thisWeekMovie: {
      name:"教父",
      comment:"最精彩的剧本,最真实的黑帮故事",
      imagePath:"/images/jf.jpg"
    },
    count:123,
    score:58
  }
})

条件渲染

wx:if

 <text wx:if="{{thisWeekMovie.isHighlyRecommended}}" 
  style="font-size:16px;color:red;">强烈推荐</text>

• 条件成立则强烈推荐出现，反之消失

<!-- hidden频繁切换开销较小，但初始化开销大 -->
<text hidden="{{!thisWeekMovie.isHighlyRecommended}}" 
  style="font-size:16px;color:red;">强烈推荐</text>

• 不论真假text均存在，只是为假时隐藏

列表渲染

wx:for

<view class=''>
  <view class='movie' wx:for="{{weeklyMovieList}}">
    <image class='movie-image'src='{{item.imagePath}}'></image>
    <view class='movie-details'>
    <!-- index:item下标 -->
      <text>第{{index+1}}周:{{item.name}}</text>
      <text>点评：{{item.comment}}</text>
      <text wx:if="{{item.isHighlyRecommended}}" 
      style="font-size:16px;color:red;">强烈推荐</text>
    </view>
  </view>
</view>

• 数组用[]括起来

Page({
  data:{
    weeklyMovieList: [
      {
        name: "泰坦尼克号",
        comment: "失去的才是永恒的",
        imagePath: "/images/titanic.jpg",
        isHighlyRecommended: false,
        id: 1292722
      },
      {
        name: "这个杀手不太冷",
        comment: "小萝莉与怪蜀黍纯真灿烂的爱情故事",
        imagePath: "/images/leon.jpg",
        isHighlyRecommended: false,
        id: 1295644
      },
      {
        name: "教父",
        comment: "最精彩的剧本，最真实的黑帮电影。",
        imagePath: "/images/jf.jpg",
        isHighlyRecommended: true,
        id: 1291841
      },
    ],

    count: 123,
    score: 58
  }
})

.movie {
  display:flex;
}
.movie-details {
  display:flex;
  flex-direction:column;
  width:550rpx;
}

.movie-image {
  width:200rpx;
  height:200rpx;
}

领取限量云产品优惠