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

本实例效果，当单击微信小程序中的图片时，该图片隐藏，再次单击时，该图片显示。如此切换。制作步骤如下：

方法一：

1. 在index.wxml中添加一个图片元素。

<view class="container" bindtap="handle"> <image wx:if="{{flag}}" src="../images/haibao/62.jpg"/> </view>

2. 在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即可。

方法2：

1. 在index.wxml中添加一个图片元素。对该元素添加data-flag属性。

<view class="container" bindtap="handle"> <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-属性名="属性值"。