vue实现点击左侧菜单，右侧跟着显示隐藏
作者：互联网
1 <template>
2 <div class="mainMaterial">
3 <div class="chooseItem">
4 <div class="navMenus">
5 <ul>
6 <li v-for="(item,index) in items" :key="index" :class="{active:index==isActive}" @click="onChange(index)">{{ item.spaceName }}</li>
7 </ul>
8 </div>
9 </div>
10 <div class="content">
11 <ul>
12 <li v-for="(item,index) in findMaterielListVos" :key="index">
13 <p class="categoryName">{{ item.classifyCategoryName }}</p>
14 <div class="materialDetail">
15 <div class="detailsLeft">
16 <img src="./../../assets/business/material.jpg" alt="">
17 </div>
18 <div class="detailsRight">
19 <p>
20 <span>{{ item.spaceName }}</span>
21 <span>{{ item.categoryName }}</span>
22 </p>
23 <p class="price">
24 <span>单价：{{ item.price }}元</span>
25 <span>X{{ item.num }}</span>
26 </p>
27 <p class="total">
28 <span>合计：{{ item.amount }}元</span>
29 </p>
30 </div>
31 </div>
32 </li>
33 </ul>
34 </div>
35 </div>
36 </template>
37
38 <script>
39 export default {
40 data() {
41 return {
42 isActive: false,
43 result: [],
44 items: [
45 {
46 'spaceName': '主卧',
47 findMaterielListVos: [
48 {
49 'classifyCategoryName': '瓷砖类-地砖/墙砖',
50 'spaceName': '主卧',
51 'price': 78.00,
52 'amount': 79.0000,
53 'brandName': '欧神诺',
54 'categoryName': '地砖/墙砖',
55 'num': 1.00
56 },
57 {
58 'classifyCategoryName': '电器类-油烟机',
59 'spaceName': '主卧',
60 'price': 2380.00,
61 'amount': 2380.0000,
62 'brandName': '美的',
63 'categoryName': '油烟机',
64 'classifyName': '电器类',
65 'num': 1.00
66 },
67 {
68 'classifyCategoryName': '开关面板类-开关面板',
69 'spaceName': '主卧',
70 'price': 2380.00,
71 'amount': 2380.0000,
72 'brandName': '美的',
73 'categoryName': '油烟机',
74 'num': 1.00
75 },
76 {
77 'classifyCategoryName': '橱柜类-柜体',
78 'spaceName': '主卧',
79 'relateCode': 'bc-cl-13773',
80 'relateName': '测试材料',
81 'brandName': 'TOTO',
82 'price': 0.00,
83 'amount': 0.0000,
84 'categoryName': '柜体',
85 'classifyName': '橱柜类',
86 'num': 1.00
87 }
88 ]
89 },
90 {
91 'spaceName': '厨房',
92 findMaterielListVos: [
93 {
94 'classifyCategoryName': '瓷砖类-地砖/墙砖',
95 'id': 39759,
96 'spaceName': '厨房',
97 'relateCode': 'cl-cz-qdz-osn-0000489',
98 'relateName': '大理石鱼肚白',
99 'price': 78.00,
100 'amount': 79.0000,
101 'remark': '额外费用:1.00元;',
102 'brandName': '欧神诺',
103 'model': 'ELX00180S',
104 'categoryName': '地砖/墙砖',
105 'classifyName': '瓷砖类',
106 'materieldetailRecordStr': '额外费用:1.00元;',
107 'num': 1.00
108 }
109 ]
110 }
111 ]
112 }
113 },
114 created() {
115 this.findMaterielListVos = this.items[0].findMaterielListVos
116 this.result = this.items
117 },
118 methods: {
119 onChange(index) {
120 this.isActive = index
121 let array = []
122 for (let i = 0; i < this.result.length; i++) {
123 if (index === i) {
124 this.items[i] = this.result[i]
125 array = this.items[i].findMaterielListVos
126 }
127 }
128 this.findMaterielListVos = array
129 }
130 }
131 }
132 </script>
133
134 <style scoped lang="less">
135 .empty{
136 text-align: center;
137 font-size: 14px;
138 margin-top:20px;
139 color: #9c9c9c;
140 }
141 .mainMaterial{
142 display: flex;
143 height: 100vh;
144 .chooseItem{
145 background: #fff;
146 width: 30%;
147 .navMenus{
148 ul{
149 li{
150 text-align: center;
151 padding:10px 0;
152 border-bottom: 1px solid #e3e3e3;
153 &.active{
154 background: #EA5520;
155 color: #fff;
156 }
157 }
158 }
159 }
160 }
161 .content{
162 background: #fff;
163 margin-left: 6px;
164 padding-left: 10px;
165 width: 70%;
166 ul{
167 li{
168 border-bottom: 1px solid #e3e3e3;
169 padding-top: 10px;
170 padding-bottom: 10px;
171 .categoryName{
172 color: #333;
173 font-size: 16px;
174 padding-bottom: 10px;
175 }
176 .materialDetail{
177 display: flex;
178 align-items: center;
179 .detailsLeft{
180 img{
181 width: 110px;
182 height: 70px;
183 }
184 }
185 .detailsRight{
186 margin-left: 8px;
187 width: 50%;
188 p{
189 color: #333;
190 font-size: 15px;
191 line-height: 24px;
192 &.price{
193 font-size: 13px;
194 color: #666;
195 display: flex;
196 justify-content: space-between;
197 }
198 &.total{
199 color:#EA5520;
200 }
201 }
202 }
203 }
204 }
205 }
206 }
207 }
208 </style>
标签：1.00,vue,categoryName,price,item,点击,菜单,findMaterielListVos,spaceName 来源： https://www.cnblogs.com/CinderellaStory/p/12120599.html