点击关闭再点击显示的功能应该用什么去写,大神解答下!!
发布于 7 年前 作者 guiyinggu 17584 次浏览 来自 问答

代码如下:

/----------wxml------------/

<view class=“container”>

  <button bindtap=“change” >点击切换</button>

  <view class=’{{index==“true”?“hide”:“present”}}’ style=“background-color:red;width:200rpx;height:200rpx;margin:20px 0 30px 0;”></view>

/-----------wxss-----------/

.hide{display:none}

.present{display:block}

/-----------js---------------/

var app = getApp()

Page({

data: {

index:‘false’

},

change:function(e){

if(this.data.index==‘false’){

  this.setData({index:‘true’})

}else{

  console.log(this.data.index);

  this.setData({index:‘false’})

}

}

})

截图:

一、刷新

二、点击关毕

三、再点击就出不来?怎么回事,求教大神

10 回复

你有试过吗,你这样写效果一次都出不来

!是逻辑运算符。当index为true时,!index为false;当index为false时,!index为true。

运行屏幕截图

<view class="{{index == true ?‘hide’:‘present’}}"

引号的问题,这样就可以了

index=="true"与 !index    有什么却别 , 为什么我写的效果就出不来,!index这个请解释下

出不来?var d=e.detail.value取到的是boolean型,true是boolean型的值,"true"是字符串,先搞清楚些

效果:


<!–index.wxml–>

<view class=“container”>

  <switch type=“switch” bindchange=“change” style=“margin-top:20px;” />

  <view class=’{{index == true?“hide”:“present”}}’

style=“background-color:red;width:200rpx;height:200rpx;margin-top:20px;”></view>

</view>

/**index.wxss**/

.hide {

  display: none;

}

.present {

  display: block;

}

//index.js

//获取应用实例

var app = getApp()

Page({

  data: {

    index: false,//用不着引号

  },

  //事件处理函数

  change: function (e) {

    var d = e.detail.value;

    console.log(d);

    if (this.data.index ) {//也不用==“false”

      this.setData({ index: d })

    } else {

      this.setData({ index: d })

    }; console.log(this.data.index);

  },

  onLoad: function () {

  }

})

/------------------js--------------------/

var app = getApp()

Page({

  data: {

    index: false,

  },

  change: function (e) {

    var d = e.detail.value;

    this.setData({ index: d })

  }

})

/----------------wxml-----------------/

<view class=’{{!index?“hide”:“present”}}’ style=“background-color:red;width:200rpx;height:200rpx;margin-top:20px;”></view>

已经测试过,能正常运行。

你可以试试用条件渲染

this.setData=({index:‘fales’})

这句写错了吧,怎么多个=号出来?删掉就正常了

回到顶部