Vue-cli实战项目11 顶部导航开发（二）循环和过滤器

上一章节

Vue-cli实战项目10侧边导航开发

循环自动生成顶部菜单

循环自动生成顶部菜单

<el-menu-item :index="index|numToString" v-for="(item,index) in navBars.list" :key="index">
					{
  
  {item.name}}
				</el-menu-item>

script数据

data() {
   
   
		  return {
   
   
			navBars:{
   
   
				activeIndex:'0',
				list:[
					{
   
   name:'首页'},
					{
   
   name:'商品'},
					{
   
   name:'订单'},
					{
   
   name:'会员'},
					{
   
   name:'设置'}
				]
			}
		  };
		},

filter和封装filter

第一步、编写filter

export default{
	filters:{
		numToString(value){
			return value.toString();
		}
	},
}

第二步、引入filter

第三步、使用filter
通过直杠（|）使用numToString过滤器

完整代码

<template>
	<div>
		<el-container style="position: absolute;left: 0;top: 0;bottom: 0;right: 0;overflow: hidden