<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
new Vue({
el: '#box',
data: {
content: '',
jsonArray: [{
'name': 'zhangsan',
'age': 230,
'sex': '男'
}, {
'name': 'lisi',
'age': 24,
'sex': '男'
}, {
'name': 'wangwu',
'age': 25,
'sex': '男'
}, {
'name': 'zhaoliu',
'age': 26,
'sex': '男'
}],
copyArray: []
},
//计算属性
computed: {
newArray: function() {
console.log("调用");
var text = this.content; //变化
//过滤匹配到的jason元素
var arr = this.jsonArray.filter(function(ele) {
if (ele.name.indexOf(text) != -1) {
return true;
} else {
return false;
}
});
return arr;
}
},
methods: {
sortObj(num) {
//alert(num);
if (num == 1) {
//升序
this.jsonArray.sort(function(a, b) {
return a.age - b.age;
})
} else if (num == 2) {
//降序
this.jsonArray.sort(function(a, b) {
return b.age - a.age;
})
} else if (num == 3) {
//默认顺序:先将原来的jason数组存储到指定数组,需要默认的列表时调用即可;
this.jsonArray = this.copyArray.slice(0);
}
}
},
mounted(){
this.copyArray = this.jsonArray.slice(0);
}
});
}
</script>
</head>
<body>
<div id="box">
<center>
<input type="text" id="" value="" placeholder="请输入搜索的内容" v-model="content" />
<ul style="list-style: none;">
<li v-for="(ele,index) in newArray" :key="index">
{{ele.name}}---{{ele.sex}}---{{ele.age}}
</li>
</ul>
<button type="button" @click="sortObj(1)">升序排列</button>
<button type="button" @click="sortObj(2)">降序排列</button>
<button type="button" @click="sortObj(3)">默认排序</button>
</center>
</div>
</body>
</html>
VUE之JASON的过滤搜索
最新推荐文章于 2024-03-15 10:33:20 发布