element-ui的使用（三）

在element-ui的使用（二）中，我们已经完成了首页的基本布局以及侧边栏的数据呈现效果。
但是还有几个小的知识点，需要补充完善

侧边栏菜单样式的完善

在侧边栏的一级、二级菜单显示后，我们需要调整一下一级菜单的图表样式，这里就使用到了iconfont,我们项目文件中的assets/fonts/demo_fontclass.html文件里，已经引入了iconfont的使用方法。比如可以直接来实现我们的效果。

由于我们的一级菜单共有5个，并且每一个的图表样式不同，所以，我决定创建一个iconObj对象来存储我们的图表，并且根据接口返回的数据中每个一级菜单的id不同，我们可以根据id来分别赋予对应的图表样式，就像这样:

   iconObj: {
        125: 'iconfont icon-user',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao',
      },

然后在根据el-menu中v-for循环得到每一个item的id，所以我们可以这样写:

需要注意的是iconObj[]的写法，iconObj是一个对象，为什么获取属性值的时候，采用方括号呢？

对象的属性确实可以通过类似于通过访问数组的中括号形式进行访问。
原理上来讲，是js这样设计的，很多弱类型语言都是如此设计。
可是并不能理解为对象跟数组没区别，例如说，你可以使用Array类型方括号的形式访问Object类型数据的属性。但是反过来，不能使用Object的点号访问Array类型数据的内容。
在js里，Key对应Value的数据结构，其实都是Object类型的，Array类型的数据都是一维的，数字下标的数据集合。
另外，插一句，还有另一种情况,就是你要访问的key是有空格的，也可以使用这种方式，例如说 people['first name']，这种情况是没法使用点号进行访问的。

---

两个都是获取对象值的方式。
第二个用变量名获取对象值的时候很有用。

var obj = { name:'lily', year:'20' }
alert(obj.year);
var y = 'year';
// 用变量获取
alert(obj[y]);

侧边栏菜单折叠与展开事件

我们引用的el-menu菜单有很多属性，其实每一个element组件都有很多属性，需要我们慢慢研究和体会奥妙

在本次项目中，我们要用到collapse和collapse-transition

collapse属性决定了是否水平折叠收起菜单，默认是false，我们需要做的是，在整个侧边栏菜单的上方重新定义一个div，点击div可以可以实现侧边栏菜单的折叠与展开，

其实思路很简单，我们可以动态绑定collapse属性，先定义一个变量isCollapse默认是false,就是展开的，然后为div绑定一个点击事件，this.isCollapse!=this.isCollapse也就是去反，来决定菜单的折叠和展开，接下来要做的就是当菜单折叠时，背景区域没有跟着变化，因此我们还要为el-aside的宽度做一个三元判断

总结

1.对象获取属性值有两种方式obj.name或者obj[name]都可以的

2.理解!=和=!的区别，一个是不等于，另一个是把感叹号右边的布尔型表达式的值（true或false）取反（变为false或true）后赋值给等号左边的变量。

3.了解了三元表达式的写法

1、一元表达式是 ：10
2、二元表达式是 ： 3+5
3、三元表达式是 ： ？ ： 
var result = time <0 ? time+10 : time-10
判断条件？结果1：结果2

4.element组件的具体属性需要详细了解
unique-opened是否只保持一个子菜单的展开,默认是false