自学小程序第一篇:点击事件控制同一个区域不同内容更换

实现效果

思路
通过小程序hidden属性控制元素显示/隐藏(值为false元素显示,值为true元素不显示),验证码一栏先显示把默认值设置为false,密码一栏设置成true,在这里用了"{{!isHidden}}",(js里设置默认是false,这里若不做更改那么所有状态将会和验证码一样即实现不了想要的效果),点击事件触发后,把isHidden值改为true,当hidden="{{isHidden}}“为true时所在元素会被隐藏,而密码hidden=”{{!isHidden}}"值变成了false,原本是隐藏现在显示出来.再次点击后把true赋值成false同理

wxml
//小绿人图片头像
//验证码输入框
{{dename}}//获取验证码

//密码图片
//密码输入框

{{changeHiddeen}}//点击改变区域

js
data: {
//图片自行添加,
dename: “获取验证码”,
isHidden: false//hidden默认值false(值为false,元素为显示,true隐藏)
},
changeHiddeen: function(e){//点击事件
if(this.data.isHidden == false){//通过if判断isHidden状态为false赋值为true,验证码切换为密码
this.setData({
isHidden: true
})
} else{//通过if判断isHidden状态为true赋值为true,密码切换为验证码
this.setData({
isHidden: false
})
}
},

wxss(不重要,样式写成自己喜欢的)
//这里我的验证码图片,密码图片用的同一个样式
//验证码输入框,密码输入框用的同一个样式