面包屑代码 （v-if 与变量i）

商品分类管理

<a @click="onefn()">*分类标签</a>

<a v-if="twoType!=''" @click="twofn()">/{{twoType}}</a>
<a v-if="threeType!=''"  @click="threeType()">/{{threeType}}</a>		
		<table>
			
			<tr>
				<td><input type="checkbox"></td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>类型模板ID</td>
				<td>操作</td>
				
				
			</tr>
			<tr v-for="k in list">
				<td><input type="checkbox"></td>
				 <td>{{k.id}}</td>
				 <td>{{k.name}}</td>
				 <td>{{k.typeid}}</td>
				 <td><input type="button" value="查询下一级" @click="nextlistfn(k.id,k.name)" v-if="i<3">
				     <input type="button" value="修改">
				 </td>
			
				
				
				
			</tr>
			
			
		</table>
		
	</div>
</body>
<script>
	new Vue({
		el:"#app",
		data:{
			list:[],
		    parentid:0,
			twoType:"",
			threeType:"",
			i:1,
			id:"",
			id2:"",
			id3:""
			
			
			
		},
		methods:{
			listfn:function(){
				
				axios.post(`http://localhost:8080/itemcat/list/${this.parentid}`).then(req=>{
					
					console.log(req)
					this.list=req.data.data
					
					
				})
				
				
				
			},
			nextlistfn:function(parentid,name){
				this.id=parentid
				this.i=this.i+1
				if(this.i==2){
					this.id2=this.id
					
				}
				if(this.i==3){
					this.id3=this.id
					
				}
				
				if(this.twoType==''&&this.threeType==""){
					this.i=2;
					this.twoType=name
				}
		 	if(this.i==3){
					
					this.threeType=name
				} 
				
				
				 this.parentid=parentid;
				 this.listfn()
				
				
				
			},
			onefn:function(){
				this.i=1,
				this.twoType=""
				this.threeType=""
				this.parentid=0;
				this.listfn()
				
			},
			twofn:function(){
				this.threeType=""
				this.parentid=this.id2
				this.i=2
				this.listfn()
				
			},
			threefn:function(){
				
				alert("three")
				
			}
			
		},
		created() {
			this.listfn()
			
		}
		
		
	})
	
	
</script>