vue 数组,对象的计算属性

230 阅读1分钟

数组的计算属性

<!-- 面包屑导航 -->
<div class="crumbs">
    <a> {{breadcrumb([0])}} <a>>
    <span> {{breadcrumb([1])}} </span>
</div>

//不设置data
computed:{
    breadcrumb() {
      let arr = []
      switch(this.type) {
        case 'research':
          arr = ['研究动态 ', '动态信息 ']
          break;
        case 'notice':
          arr = ['通知公告 ', '通知详情 ']
          break;
      }
      return arr
    }
},

对象的计算属性

<!-- 面包屑导航 -->
<div class="crumbs">
    <router-link :to='breadcrumb.link'> {{breadcrumb.linkName}} </router-link>>
    <span> {{breadcrumb.currentName}} </span>
</div>
//不设置data
computed:{
    breadcrumb() {
        let obj = {};
        if(this.refer == 'research') {
            obj.link = '/manage/projectResearch';
            obj.linkName = '研究动态';
            obj.currentName = (this.id == '-1') ? '添加研究动态' : '编辑研究动态';
        }else if(this.refer == 'notice') {
            obj.link = '/manage/projectNotice';
            obj.linkName = '通知公告';
            obj.currentName = (this.id == '-1') ? '添加通知公告' : '编辑通知公告';
        }
        return obj
    }
},