VUE之JASON的过滤搜索

最新推荐文章于 2024-03-15 10:33:20 发布

@新之助

最新推荐文章于 2024-03-15 10:33:20 发布

阅读量320

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/weixin_40487115/article/details/103402961

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>

@新之助

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE之JASON的过滤搜索

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> ...
复制链接

扫一扫

专栏目录