微信小程序元素显示隐藏方法总结（原生）

---

前言

我们在日常开发中，或多或少的会遇见一些元素的显示隐藏的需要。这里，我们以vue来举例，在vue中，我们往往通过v-show或者v-if来控制元素的显示和隐藏。但是在小程序的原生开发中，怎么来实现尼？

一、css实现

例子：
这里我用的购物车为例，通过为元素设置style内联样式。动态传入display的值，进行元素的显示隐藏控制。
wxml

<view class="cart" style="display: {{none}};">
  <view class="cart_item">
    <view class="radio">
      <radio value="r1" color="#FFA500" checked="true"/>
    </view>
    <view class="des">
      <view class="img">
        <image src="../../image/cart/01.PNG"></image>
      </view>
      <view class="content">
        <view class="title">单头玫瑰珍爱B-20枝/扎</view>
        <view class="color">颜色：</view>
        <view class="size">规格：20枝/扎</view>
        <view class="price">¥ 59</view>
      </view>
    </view>
  </view>
  <view class="botom_tool">
    <view class="radio">
      <radio value="r1" color="#FFA500" checked="true"/>
      全选
    </view>
    <view>
      管理
    </view>
    <view class="total">
      <view class="all_price">合计：¥ 162</view>
      <view class="desc">优惠金额见结算界面</view>
    </view>
    <view class="go">
      去结算(3)
    </view>
  </view>
</view>

<view style="display: {{!none}};">
暂无数据，请先登录哦！
</view>

js

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.init();
  },
/**
 * @desc 初始化函数
 */
  init() {
    // 判断用户是否登录，如果没有登录的话，是没有购物车信息的
    const app = getApp();
    console.log("APP", app);
    if(app.globalData.userInfo == undefined || app.globalData.userInfo == '') {
      this.setData({
        none: 'none'
      })
    } else {
      this.setData({
        none: 'block'
      })
    }
  },

总结

目前，我就先写这一种方法，后续有时间的话，将会在本篇文章追加新的方法。谢谢浏览。