[uni-app基础]使用v-if和@click事件绑定，控制页面元素view组件的显示与隐藏

背景

在uniapp项目中，有时候需要控制一些组件元素的显示（展开）和隐藏（收起）。以下分享一个简单的实现思路。示例如下。

展开状态

 收起状态

思路

实现原理很简单。

通过条件渲染语句 v-if 来判断当前元素是否需要显示。当v-if=true，显示，当v-if=false，隐藏。

通过绑定点击事件，来改变 v-if 的判断条件。如当前为true，点击后变成false，反之亦然。

template

<view class="service-block">
    <view class="toggle-title" data-vid="0" @click="toggleView">
        <view class="border-text"><text class="font-size2">收费标准</text></view>
	    <image class="arrow-ico" :src="icoArr[0]"></image>
    </view>
	<view v-if="vShow[0]" class="sample-pic">
	    <image mode="widthFix" src="需要显示的文件"></image>
	</view>
</view>

（以上代码为第一个需要操作的view组件代码，另外两个需要操作的view就不贴出来了。）

代码解析

data-vid：自定义组件id

通过data-vid自定义需要控制显示和隐藏的view组件id，此处为“0”，下一个则为“1"，以此类推,（为方便演示此处用比较机械的方法。如果需要控制显示和隐藏的组件很多，则需要优化此处代码）

@click="toggleView"：绑定点击事件

绑定一个名为toggleView方法的点击事件。该点击事件通过data-vid就能知道当前点击的是第几个组件。

:src="icoArr[0]"

src是存放图标的资源地址。前面加冒号”:“,表示从自定义的数据中读取。

icoArr则为自定义的数据（下面还会出现），用来存放箭头图标的资源位置。icoArr[0]为第1个view组件展开时的箭头图标（默认展开），与上面的data-vid存在一一对应关系。

v-if="vShow[0]"

使用条件渲染语句v-if，来判断当前组件的显示或隐藏。条件渲染语句的官方参考文档：https://uniapp.dcloud.net.cn/tutorial/vue-basics.html#condition

vShow是自定义的一个用来存放布尔值的数组（下面还会出现）。因为此处的组件id是0(编程语言中，第一个元素的下标是0)，所以vShow[0]代表的就是当前组件是true（显示）或false（隐藏）

也就是说，当v-if=true，显示，当v-if=false，隐藏。

script

export default {
	data() {
		return {
            //此处写法较为机械，无法应对更复杂的情况

            //三个view组件对应的显示或隐藏布尔类型数组，默认为true显示
            vShow: [true,true,true],
            //默认为展开状态的箭头（箭头向下）
            icoArr: ["展开的箭头图标地址","展开的箭头图标地址","展开的箭头图标地址"],
        {
    },
    onShow() {
        //生命周期方法与本案例无关
    },
    methods: {
        //绑定的点击事件，点击后通过自定义data-vid的数值传递给参数e
		toggleView(e) {
		    let showIco = "../../static/images/opening.png"    //展开状态箭头图标
			let hideIco = "../../static/images/close.png"      //收起状态箭头图标
			let i = e.currentTarget.dataset.vid     //取得参数e当中的vid属性，就知道当前点击了第i个veiw组件   
			this.vShow[i] = !this.vShow[i]    //点击后，给对应第i个布尔值取反，即可控制显示和隐藏
			//最后通过条件判断，更新相应的箭头图标
            if (this.vShow[i]) {
				this.icoArr[i] = showIco
			} else{
				this.icoArr[i] = hideIco
			}
        }
    }
}

此处代码很简单，注释都有说明，就不过多解释。本文只是提供一个实现方法参考，对应的css样式就不提供了。

注意：以上只是提供一个新手向的简单实现思路，应用起来也比较机械。无法应对复杂的情况。