小程序--wx:for wx:if

1.wx:for

效果:
在这里插入图片描述
(1)js代码

  data: {
    address:[
      {
        Provincial:'湖南省',
        urban:'株洲市',
        areas:'天元区',
        complete_address:'湖南工业大学一食堂',
        default_address:1,
        order_usegender:'女士',
        order_buyname:'龙某某',
        order_tel:'13045897854',
      },
      {
        Provincial:'湖南省',
        urban:'长沙市',
        areas:'芙蓉区',
        complete_address:'芙蓉路某某街道23-124',
        default_address:'0',
        order_usegender:'男',
        order_buyname:'33',
        order_tel:'15245686984',
      }
    ]
  },

(2)wxml代码

 
<view wx:for="{{address}}"  wx:for-item="address" class="box1" wx:key="key">
    <!--详细地址-->
    <view>
      <view class="box2">
        <view class="detail_address">
          {{address.Provincial}}{{address.urban}}{{address.areas}}{{address.complete_address}}
        </view>
        <view wx:if="{{address.default_address}}"class="default_address">
         <view style="margin-left:5rpx"> 默认</view>
        </view>
        <view wx:else></view>
      </view>
      <view class="box3">
        <!--用户点单所用信息-->
        <view class="use_massege">
          <view class="use_name"> {{address.order_buyname}}</view>
          <view class="use_gender">{{address.order_usegender}}</view>
          <view class="use_tel">{{address.order_tel}}</view>
        </view >
      <!--编辑模块-->
        <view class="edit_view" >
          <image src="/static/images/commom/edit.jpg" class="edit_img" bindtap="edit_address"></image>
        </view>
      </view>
    </view>
  </view>

(3)使用wx:for遇到的警告Now you can provide attr wx:key for a wx:for to improve performance.
这是一个关于性能优化方面的提示.不处理不影响程序运行。
在wx:for后面添加wx:key=“key” 可消除警告。

2.wx:if 条件判断

(1)

 <view wx:if="{{address.default_address}}"class="default_address">
 	//{{address.default_address}}为真 执行的代码块
 </view>
  <view wx:else>
 	//{{address.default_address}}为假 执行的代码块
  </view>

(2)wx:if wx:else 嵌套使用

<!--按钮-->
  <view class="button">
    <view  wx:if="{{item.static_id==1}}">
      <button >去支付</button>
    </view>
    <view  wx:elif="{{item.static_id==1}}">
      <button >催单</button>
    </view>
    <view  wx:else>
      <button >查看订单详情</button>
    </view>
  </view>
发布了45 篇原创文章 · 获赞 6 · 访问量 1198

猜你喜欢

转载自blog.csdn.net/qq_41219586/article/details/103327003