VUE----v-show实现点击出现,再点击隐藏
核心思想:绑定点击事件,默认show变量为false,一旦有e事件,判断是否是ture,如果是true,让变量改为false,如果为false,改为true实现。HTML:<template><view><view class="quanbu" @click="zhankai1" ><text>展开/隐藏</text></view&
·
核心思想:
绑定点击事件,默认show变量为false,一旦有e事件,判断当前的页面是否为ture,如果是true,让变量改为false,如果为false,改为true实现。
HTML:
<template>
<view>
<view class="quanbu" @click="zhankai1" >
<text>展开/隐藏</text>
</view>
<view class="diqu" v-show="xianshi">
</view>
</view>
</template>
JS:
<script>
export default {
data() {
return {
xianshi:false,
}
},
methods: {
zhankai1(e){
if(this.xianshi==true){
this.xianshi=false
}else if(this.xianshi==false){
this.xianshi=true
}
}
}
}
</script>
CSS:
<style>
.quanbu {
width: 130rpx;
height: 52rpx;
border-radius: 50rpx;
background-color: #eaeaea;
display: flex;
justify-content: center;
align-items: center;
margin: 24rpx;
font-size: 26rpx;
color: #323232;
}
.diqu{
width: 100%;
height: 750rpx;
background-color: #00C545;
position: fixed;
top: 260rpx;
z-index: 3;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)