发表于: 2019-12-14 23:20:40

1 1207


今天完成的事:

今天写后台首页需要把后端传回来的数组对象v-for循环渲染出来

复习了for循环并写demo实现

 <div class="box">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#53a8ff"
        text-color="#fff"
        active-text-color="#ffd04b"
        router="true"
      >
      <div v-for="(item,index) in data" :key="index.id">
        <el-submenu :index="item.index" >
          <template slot="title">
          <i class="el-icon-s-home"></i>
          <span slot="title">{{item.name}}</span>
          </template>
          <div v-for="chidren in item.chidren" :key="chidren.id">
            <el-menu-item :index="chidren.index" :route="chidren.route">
           <i class="el-icon-pie-chart"></i>
          <span slot="title">{{chidren.name}}</span>
        </el-menu-item>
          </div>
        </el-submenu>
        </div>
      </el-menu>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name: "homepage",
  data() {
    return {
      username: "admin",
      data: [{name:"欢迎页",index:"1",route:"/welcome"},
      {name:"banner管理",index:"2",route:"/banner"},
      {name:"公告管理",index:"3",route:"/notice"},
      {name:"课程管理",index:"4",route:"/course"},
      {name:"消息管理",index:"5",route:"/message"},
      {name:"后台管理",index:"6",
      chidren:[{name:"模块管理",index:"6-1",route:"/module"},
                                        {name:"角色管理",index:"6-2",route:"/role"},
                                        {name:"后台用户管理",index:"6-3",route:"/id"},
                                        {name:"修改密码",index:"6-4",route:"/password"}]},
                                        {name:"用户管理",index:"7",route:"/user"}
      ]
    };
  },
  methods: {
    handleOpen(keykeyPath) {
      console.log(key, keyPath);
    },
    handleClose(keykeyPath) {
      console.log(key, keyPath);
    }
  }
};


明天计划的事:

写首页导航栏、拆分禅道

遇到的问题:

暂无

收获:

vue v-for详解

1.Vue动态渲染列表------v-for用法详解:

Html

<figure v-for="list in lists">
    <div>
    <a v-bind:href=" list.big">
       <img v-bind:src="list.small">
    </a>
</div>

</figure>

<template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>

 

渲染在页面上的样式: < figure >...</ figure >

< figure >...</ figure >

< figure >...</ figure >

用法:

  1. 想动态增加那个元素就在其上加 :

v-for=[自定义名字] in [json中数组名字]

  1. 绑定在html中的数据用 :

(1)元素内部的属性用v-bind[属性] = [自定义名字].json数组中的属性’

(2)标签内容引用 {{ [自定义名字].json数组中的属性 }}






返回列表 返回列表
评论

    分享到