基于VUE的人员信息列表实现过滤和复制的方法

1、实现的效果

  用vue实现将data.js里的模拟数据展示在前端，增加一个按钮使其在显示的基础上再显示一遍模拟数据；增加一个搜索框使其用户向输入框内输入文字，完成相应的数据显示（例如：下面信息有好多姓李的同学，在输入框输入“李”字之后，下面信息只剩姓李的同学信息）。

2、实现效果所用的技术vue.js

  其实想实现显示数据和增加模拟数据、模糊搜索的方法并不唯一，既可以用jquery或dom方式实现，主要使用vue.js实现的目的是理解vue数据的双向绑定和静态数据是怎么引用的，还有理解vue中方法、过滤器的使用。

3、代码分为四个部分：

  ①index.html主页显示部分

主要是使用v-if和v-for来遍历data中的数据并显示出来，search搜索框和button复制按钮绑定myself.js中的方法

<div class="main" id="data">
  <div class="search_div">
    <b>Search</b>
    <input type="text" v-model="question" placeholder="搜索关键字">
  </div>
  <div class="dataList">
   <template v-if="searchData.length>0">
      <div class="item" v-for="item in searchData">
          <img class="img" :src="item.imgUrl">
          <!--  <div class="other"><span>{{item.id}}</span></div> -->
          <div class="other"><span>{{item.name}}</span></div>
          <div class="other"><span>{{item.stdNum}}</span></div>
          <div class="other"><span>{{item.major}}</span></div>
          <div class="other"><span>{{item.className}}</span></div>
      </div>
  </template>
   <template v-else>
    <div class="no_data">暂无相关数据</div>
   </template>
  </div>
  <div class="btn_div">
    <button class="btn" type="button" @click="getMore()">复制</button>
  </div>
</div>

  ②myself.js数据引入及其方法的代码

mounted方法自动获取data中的数据，getDate方法将data中的数据传入roots数组并在index.html中显示，getMore方法将data中的数据当做新数组再次连接到原来已显示的数据之后，但是这一切的前提建立在index.html必须引用了data.js和myself.js

mounted:function(){
		 this.getData();
	 },
methods:{
		getData: function(){	
			var that=this
			that.roots=dataList;
		},
		 getMore: function (){
            var that = this;
            that.roots = that.roots.concat(dataList);
        }
	},
computed:{
	 	searchData:function(){
	 		var question=this.question;
				if(question){
					return this.roots.filter(function(item){
						return Object.keys(item).some(function(key){
							return String(item[key]).toLowerCase().indexOf(question)>-1
						})
					})
				} 
				return this.roots;
			}
		}	

  ③data.js：提供的数据代码

  ④test.css：样式部分代码

4、总结与心得

1、首先写前端要把html、js、css、数据js分开写，然后从html页中将其他文件或数据引入使用。

2、data.js里除了数据不要写其他任何东西，只是用来引用的。编写完后，要想改变显示的数据，只需修改data.js里的内容，并不需要其他修改。

3、要考虑到当data.js里没有数据时该向页面输出什么，（这里用到了<template v-else> ）而不是整个网页没有任何显示。

4、<template>用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用JavaScript进行实例化。它可以确保内容是有效的，但并不会被渲染，从而使html变得更加标准和规范。默认情况下，<template>是隐藏的，实际是默认其display属性为none。

5、v-if指令只渲染他身后表达式为true的元素，v-show指令会渲染他身后表达式为false的元素，这样的元素上会添加css代码：style="display:none"。v-else必须跟在v-if/v-show指令之后，不然不起作用，如果v-if/v-show指令的表达式为true，则else元素不显示。

6、v-for类似于js的遍历，v-for="item in items", items是数组，item为数组中的数组元素。

7、在实现模拟数据加载时，getMore（）方法中用到concat（）函数：that.roots = that.roots.concat(dataList)；使roots数组后再连接一个数组dataList。

8、过滤器过滤用户搜索的包含关键字的内容，其中filter方法将匹配元素集合缩减为匹配指定选择器的元素，some方法用于检测数组中的元素是否满足指定条件，toLowerCase方法返回转换后字符的小写形式，indexOf返回某个指定的字符串值在字符串中首次出现的位置；都为筛选提供了作用。

9、在为div添加样式时犯了一个错误就是将class写成了id，使css中的样式没有添加到div中。class属性用于指定元素属于何种样式的类，例如：  .a { color: lime; background: #ff80c0 }；id属性用于定义一个元素的独特的样式，例如：  #b{ font-size: larger }

10、当元素共用一个样式时，中间用空格分开，例如：.main .search_div{width: 100%;}。