uniapp点击切换显示隐藏在模板中以及方法
时间: 2023-12-07 07:03:12 浏览: 53
在uniapp中实现点击切换显示隐藏有两种方法:
1. 在模板中使用v-if指令
在模板中使用v-if指令可以根据条件动态显示或隐藏元素。
例如,以下代码中,点击按钮会切换显示或隐藏一个div元素:
```
<template>
<div>
<button @click="show = !show">{{ show ? '隐藏' : '显示' }}</button>
<div v-if="show">显示内容</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
```
2. 在方法中使用this.$refs
在方法中使用this.$refs可以通过操作DOM元素来实现显示或隐藏。
例如,以下代码中,点击按钮会通过操作DOM元素来切换显示或隐藏一个div元素:
```
<template>
<div>
<button @click="toggle">{{ show ? '隐藏' : '显示' }}</button>
<div ref="content">显示内容</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
toggle() {
this.show = !this.show;
this.$refs.content.style.display = this.show ? 'block' : 'none';
}
}
}
</script>
```