vue簡單的table切換 不使用路由
阿新 • • 發佈：2019-01-28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.fir>li{
width: 50px;
height: 50px;
border: 1px solid ;
float: left;
line-height: 50px ;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<ul class="fir">
<li v-for="x,index in dao" @click="tab(index)">{{x}}</li>
</ul>
<div>
<div v-for="i,index in content" class="cont" v-if="index==num">{{i}}</div>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
const vm=new Vue({
el:"#app",
data:{
dao:["dao1","dao2","dao3"],
content:["c11","c22","c33"],
num:0
},
methods:{
tab(sza){
this.num=sza
}
}
})
</script>
</html>