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>

原文地址:https://www.cnblogs.com/CinderellaStory/p/12120599.html

时间: 2024-10-15 22:04:07

vue实现点击左侧菜单,右侧跟着显示隐藏的相关文章

vue实现点击按钮,内容部分显示隐藏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue 点击,鼠标移动上去显示隐藏

1,鼠标点击显示隐藏,样式可以自己调,我就写个dome. <div class="min"> <button @click="change">点击我</button> <div v-show="show"> 显示隐藏的内容 </div> </div> <script> export default { name: "testresult", d

点击一个切换按钮 按钮的文字切换 对应的内容也跟着显示隐藏

点击展开的时候对应的内容块展开,点开之后变成关闭文字,对应的内容快也变成关闭. class为z_look_medm是代表展开关闭文字的的按钮 class为z_look_more是代表的显示关闭的内容块. $(".z_look_medm").click(function () {        if ($(".z_look_more").is(":visible")) {            $(".z_look_medm")

jQuery网页右侧固定层显示隐藏在线qq客服代码

CSS代码: 1 @charset "utf-8"; 2 *{padding:0;margin:0;} 3 html,body{font-size:12px;font-family:"微软雅黑";outline:none;color:#666;background:#fff;} 4 ul,ol{list-style:none;} 5 img{border:none;outline:none;} 6 a{color:#666;text-decoration:none;

easyui左侧导航菜单右侧载入百度地图项目框架

代码下载 http://pan.baidu.com/s/1cDht7K 一个左侧是导航菜单,右侧是百度地图的应用: 一 左侧菜单 使用jquery easyui框架:网上下的资源:运行后如下: 二 修改菜单 修改后如下:标注,地理要素,数据管理:这些是GIS功能: 三 jquery  easyui框架是这么用的: 单击左侧不同菜单:链接到不同html文档:就会在右侧显示相应文档: 四 载入百度地图 在其中一个demo2.html中,载入百度地图:效果如下:以后可点击左侧菜单,在右侧增加百度地图应

web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)

(1)实现方法:采用ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) (2)原理:ajax的局部刷新原理:通过.load()重新加载页面中的某一部分,巧妙的借助data-*的自定义属性来存储数据,点击的时候修改锚点,因为地址有变,所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个. (3)适用场景:遇到ajax局部刷新的需求也有很多,有时候比较简单,当内容较少,适

权限模块_使用权限_实现主页面的效果_显示左侧菜单&amp;只显示有权限的菜单项

权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String index() { return "index"; } public String top() { return "top"; } public String bottom() { return "bottom"; } public String le

5购物车菜单显示隐藏和事件委托版

HTML代码: 第一版HTML:(非事件委托版) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>菜单和详细显示隐藏</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: "\5FAE\8F6F\96C5\9ED1

PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二)

关于tree菜单生成,参考我的另一篇博文地址tree 菜单 实现功能:点击左侧tree菜单中的table,右侧通过datagrid加载出该表对用的所有数据 难点:获取该表的所有列名,动态生成datagrid,并加载数据 解决办法: 使用tree菜单的onClick事件: $('#tree').tree( { url:'tree_getData.php', onClick:function(node){ //判断点击的节点是否是子节点是子节点就创建datagrid,否则就return打开这个节点