小程序--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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值