用vue2+js自定义写出点击展开和收起效果的方框,请帮我写出了
时间: 2024-05-05 09:18:54 浏览: 16
好的,下面是使用 Vue 2 实现点击展开和收起效果的方框的代码:
```
<template>
<div>
<div class="box" :class="{ open: isOpen }" @click="isOpen = !isOpen">
<div class="box-header">{{ header }}</div>
<div class="box-content" v-show="isOpen">{{ content }}</div>
</div>
</div>
</template>
<script>
export default {
props: {
header: String,
content: String,
},
data() {
return {
isOpen: false,
};
},
};
</script>
<style>
.box {
border: 1px solid #ccc;
margin-bottom: 20px;
}
.box-header {
background-color: #f0f0f0;
padding: 10px;
}
.box-content {
padding: 10px;
display: none;
}
.box.open .box-content {
display: block;
}
</style>
```
你可以将上面的代码保存为一个 Vue 组件,并在其他组件中使用它。例如,你可以使用以下代码在父组件中引入和使用该组件:
```
<template>
<div>
<my-box header="标题1" content="内容1"></my-box>
<my-box header="标题2" content="内容2"></my-box>
</div>
</template>
<script>
import MyBox from "./MyBox.vue";
export default {
components: {
MyBox,
},
};
</script>
```
这样就可以在父组件中使用 `my-box` 组件,并指定两个方框的标题和内容了。当用户点击方框时,它会展开或收起内容。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)