我爱小程序
| 问题模块 |
|---|
| API和组件 |
代码如下：
/----------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'})
}
}
})
截图：
一、刷新
二、点击关毕
三、再点击就出不来？怎么回事，求教大神
网友回复
!是逻辑运算符。当index为true时，!index为false；当index为false时，!index为true。
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>
已经测试过，能正常运行。
你有试过吗，你这样写效果一次都出不来
<view class="{{index == true ?'hide':'present'}}"
引号的问题，这样就可以了
你可以试试用条件渲染
2L正解
this.setData=({index:'fales'})
这句写错了吧，怎么多个=号出来？删掉就正常了