微信小程序单击元素切换元素的显示和隐藏

本实例效果当单击微信小程序中的图片时该图片隐藏再次单击时该图片显示。如此切换。制作步骤如下方法一1. 在index.wxml中添加一个图片元素。view classcontainer bindtaphandle image wx:if{{flag}} src../images/haibao/62.jpg/ /view2. 在index.js中为flag赋初始数据再在handle函数中用setData修改flag变量的值Page({ data:{ id:1, title: 王船山简介, flag:true, person:{ name:王船山, age:1619年10月-1692年2月 } }, handle: function(){ this.setData({ title:王夫之故居,flag:!this.data.flag}) } })注意获取flag变量的值要用this.data.flag但访问flag变量直接用flag即可。方法21. 在index.wxml中添加一个图片元素。对该元素添加data-flag属性。view classcontainer bindtaphandle image wx:if{{flag}} src../images/haibao/62.jpg >Page({ data:{ id:1, title: 王船山简介, flag:true, }, handle: function(e){ this.setData({ title:王夫之故居,flag:!e.target.dataset.flag}) } })注意e.target.dataset.属性名可访问元素的自定义属性形如data-属性名属性值。