老大让做vue项目,可是我对vue还不熟好吧,抓紧时间学习,记录
此处省略css
<table id="toptable" >
<thead>
<tr>
<th>序号</th>
<th>显示顺序</th>
<th>景区名称</th>
<th>景区地址</th>
<th width="230px"></th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) of dataList">
<td v-text="item.code"></td>
<td v-text="index+1"></td>
<td v-text="item.name"></td>
<td v-text="item.region"></td>
<td style="text-align: right;">
<button v-if="index !==0" @click="getTop(index)">置顶</button>
<button @click="delData(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<script>
var vtable=new Vue({
el:"#toptable",
data:{
dataList:[]
},
mounted(){
this.showData();
},
methods:{
showData () {
axios.get("arealist.json").then(response=>{
for(let i=0;i<response.data.length;i++){
vtable.dataList.push(response.data[i]);
}
})
},
deleteData(index){
if(!confirm("您确定要删除此景区吗?")){
return false;
}
vtable.dataList.splice(index,1);
},
getTop(index){
var returnTop=vp.dataList[index];
vtable.dataList.splice(index,1)
vtable.dataList.unshift(returnTop);
}
}
})
</script>
[
{
"name":"狼牙山景区",
"code":"00123545",
"region":"保定 易县"
},{
"name":"白洋淀",
"code":"00343445",
"region":"保定 白洋淀"
},{
"name":"野山坡",
"code":"00123598",
"region":"保定 涞水"
}
]
置顶前:
置顶后: