<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<button @click='click("id")'>id</button>
<button @click='click("yw")'>yw</button>
<button @click='click("sx")'>sx</button>
<button @click='click("name")'>name</button>
<button @click='click1("ip")'>ip</button>
<ul v-for="item in msg">
<li>name:{{item.name}}</li>
<li>id:{{item.id}}</li>
<li>yw:{{item.yw}}</li>
<li>sx:{{item.sx}}</li>
<li>ip:{{item.ip}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#box',
data() {
return {
msg:[
{name:'张三',id:1,yw:'96',sx:'98',ip:'192.168.0.100'},
{name:'李四',id:3,yw:'93',sx:'61',ip:'192.168.0.15'},
{name:'王五',id:4,yw:'87',sx:'9',ip:'192.168.0.220'},
{name:'赵六',id:2,yw:'55',sx:'66',ip:'192.168.0.80'}
],
f:true
}
},
methods: {
click1(a){
this.f=!this.f
var o=this.f?1:-1
let compare = (item1, item2) => {
var n1=item1[a].split('.').map(x => parseInt(x))
var n2=item2[a].split('.').map(x => parseInt(x))
for (let i = 0; i <4; i++) {
if(n1[i] === n2[i]) {
continue
} else {
if(o<0) {return n1[i] > n2[i]?1:-1}
return n1[i] < n2[i]?1:-1
}
}
}
return this.msg.sort(compare)
},
click(a){
this.f=!this.f
var o=this.f?1:-1
this.sortBy(this.msg,a,o)
},
sortBy:function(n,field,order){
let compare = (item1, item2) => {
if(/[\u4E00-\u9FA5]/g.test(item1[field])){
return (item1[field]).localeCompare(item2[field])
}else if(/^[0-9]+$/g.test(item1[field])&&/^[0-9]+$/g.test(item2[field])){
return parseInt(item1[field]) < parseInt(item2[field])?1:-1
}else{
return item1[field] < item2[field]?1:-1
}
}
if (order < 0) {
compare = (item1, item2) => {
if(/[\u4E00-\u9FA5]/g.test(item1[field])){
return (item2[field]).localeCompare(item1[field])
}else if(/^[0-9]+$/g.test(item1[field])&&/^[0-9]+$/g.test(item2[field])){
return parseInt(item2[field]) < parseInt(item1[field])?1:-1
}else{
return item2[field] < item1[field]?1:-1
}
}
}
return n.sort(compare)
}
}
})
</script>
</html>