vue|vue 手风琴组件
1.创建组件
SqueezeBox.vue
- {{item.name}}{{item.show}}
-
{{a.name}}
- {{b.name}}
.header {
width: 100%;
background-color: #ff5722;
color: #ffffff;
>ul {
width: 100%;
>li {
width: 100%;
border: 1px solid #ffffff;
cursor: pointer;
// float: left;
color: 20px;
text-align: center;
line-height: 60px;
&:hover {
background-color: #ff9800;
}
>ul {
width: 100%;
background: red;
li{
&:hover{
background: #c31111;
}
}
}
}
.active {
background-color: #ff9800;
.activeItem{
background-color: green;
}
}
}
}
2.页面调用
【vue|vue 手风琴组件】3.效果图
文章图片
转载于:https://www.cnblogs.com/crazycode2/p/8428209.html
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- 动态组件与v-once指令
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- (六)Component初识组件
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)