vue 左侧菜单隐藏_vue实现点击左侧菜单，右侧跟着显示隐藏

1

2

3

4

5

6

{{ item.spaceName }}

7

8

9

10

11

12

13

{{ item.classifyCategoryName }}

14

15

16

17

18

19

20 {{ item.spaceName }}

21 {{ item.categoryName }}

22

23

24 单价：{{ item.price }}元

25 X{{ item.num }}

26

27

28 合计：{{ item.amount }}元

29

30

31

32

33

34

35

36

37

38

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

133

134

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

标签：1.00,vue,categoryName,price,item,点击,菜单,findMaterielListVos,spaceName

来源： https://www.cnblogs.com/CinderellaStory/p/12120599.html