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

目录 前言一、css实现总结

---

前言

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

一、css实现

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

  
    
      
    
    
      
        
      
      
        单头玫瑰珍爱B-20枝/扎
        颜色：
        规格：20枝/扎
        ¥ 59
      
    
  
  
    
      
      全选
    
    
      管理
    
    
      合计：¥ 162
      优惠金额见结算界面
    
    
      去结算(3)
    
  



暂无数据，请先登录哦！

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'
      })
    }
  },

总结

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