目录

前言

我们在日常开发中，或多或少的会遇见一些元素的显示隐藏的需要。这里，我们以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'})}},

总结

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