网页端&小程序的前端note：组件的显示或隐藏（附带控制样式）

刚开始写小程序时，百度输入隐藏view，得到的大多数解决方案都是在class中增加具有隐藏属性的类选择器hide，实际上，除了遮罩层我都不这样写了
因为这样写，wxml的class代码太多了，如图

<text class="goodsop-num {{item.goodsNum>0?'':'hide'}}" data-num="{{item.goodsNum==null?0:item.goodsNum}}">{{item.goodsNum==null?0:item.goodsNum}}</text>
<view class="remove-goods {{item.goodsNum>0?'':'hide'}}" bindtap='removeGoods' data-index="{{index}}" data-id="{{item.goodsId}}" data-num="{{item.goodsNum==null?0:item.goodsNum}}">

考虑隐藏显示，主要是根据业务需要
升级后的写法

//model在该页面中是一个radio的值，在关于radio的文章会提及
//页面实时依据model来控制显示view，注意是实时且不需要另外写js代码
<view wx:if="{{model == 1}}"  class="order-region">
  <view class="order-field clearfix" id= "freight-field">           
     <view class="order-label margin-l-10">运费</view>
     <view wx:if="{{canOrder && freight > 0}}" class="order-input red-text" id="freightMoney">{{freight}}元</view>  
     <view wx:elif="{{canOrder && freight == 0}}" class="order-input red-text" id="freightMoney">免运费</view>  
     <view wx:else class="order-input red-text" id="freightMoney">未达到配送标准</view>  
   </view>
</view><!-- 运费   END-->

在网页端 id选择器基本上可以说是无所不能，不管是前篇文章提及的赋值，还是组件的显示隐藏，或是事件/取值/增加属性等，本文主要介绍 组件的显示隐藏，
（赋值请参考：网页端&小程序的前端note：赋值）

<div class="clearfix">
    <label class="remark">备注</label>
    <textarea id="remark"></textarea>
</div>
<span id="order-total" class="order-total" order-total="0" goods-total="0"></span>
<input id="order-submit" class="combtn order-btn active" type="submit" value="提交订单">

//从被选元素移除一个或多个类，class="类a 类b 类c"
$("#order-submit").addClass("active");
$("#order-submit").removeClass("active");
//在Jquery中class="remark"的写法是".remark"和"#address"
$(".remark").show();
$("#address").hide();
//返回被选元素的属性值 order-total是自定义的属性，常用于事件
//在小程序中的自定义属性有限制，具体看官网，不过可以通过this.data.XX实时获取页面的值
var params = {totalPrice: $("#order-total").attr("order-total")}
$("#order-total").attr("order-total",Price);
//返回或设置匹配的元素的一个或多个样式属性
$(".limit").css({'line-height':'50px'});


//组件根据屏幕长度宽度的计算实现居中功能（不太常用）
$(window).resize(function(){ 
    $(".tipdialog-content").css({ 
         position: "absolute", 
         left: ($(window).width() - $(".tipdialog-content").outerWidth())/2, 
          top: ($(window).height() - $(".tipdialog-content").outerHeight())/2 
    });        
}); 

==========================补充分界线

最后附上小程序中的两种写法

 //class的写法需要在wxss文件中增加一个hide的选择器
 <view class="l-btn {{isShowMask?'':'hide'}}">
   <view class="l-btn-a" bindtap='editAddress'>
      <icon class="fa fa-plus-square-o l-btn-a-fa"></icon>
      <text class="l-btn-a-text">添加新地址</text>  
   </view>
 </view>

//注意只需要使用wx:if  代码上简洁明了
    <view wx:if="{{isShowMask}}" class="l-btn">
      <view class="l-btn-a" bindtap='editAddress'>
        <icon class="fa fa-plus-square-o l-btn-a-fa"></icon>
        <text class="l-btn-a-text">添加新地址</text>  
      </view>
    </view>

//wxss的hide选择器
.hide {
  display: none !important;
}