2，列表渲染指令v-for以及过滤和排序---vue教程

列表渲染指令

过滤

v-for的使用

遍历数组和对象

遍历数组：

		

			序号：{{index}},书名:{{book.name}},价格：{{book.price}}
		
	

	new Vue({
		el:"#app",
		data:{
			books:[
				{name: 'Vue.js', price:50},
		        {name: 'Javascript', price:30},
		        {name: 'Css', price:40},
		        {name: 'Html', price:60}
			]
		}

解释：这个很像python中的迭代数组的方法，只是这个需要用key来绑定index已确定index唯一
其中，in可以使用of替代

迭代对象

		

			序号：{{index}}----键：{{key}}=>值：{{item}}
		
	

内部迭代的意思：选取一个元组进行迭代。其中item，key，index分别代表着 值，属性，以及序号

运行结果：

迭代整数

用法：{{n}}

vue数组的更新

对列表行项目进行增删查改即是vue对原生方法的重写和增强，增加了添加了更新视图的功能

非变异方法：

变异方法与非变异方法区别：编译方法会改变原始数据，而非变异方法不会修改原始数组但是会得到一个新的数组 vue在检测数据变化时，并不是直接渲染整个列表，而是最大化的服用dom元素，这导致替换数组中，含有相同元素的项不会被重新渲染。所以可以更新数组替换数组

1)通过索引直接设置的项,如:vm.books[2]={};
2)修改数组的长度,如:vm.books.length=1;

解决方法参见https://blog.csdn.net/ABAP_Brave/article/details/81714611

对列表进行操作

methods:{
			deleteBook(index){
				//Vue中的splice（）是一个重写方法，实现了以下两个功能
				//1.调用原生数组中的对应方法
				//2.更新界面

				this.books.splice(index,1)

			},
			updataBook(index,newBook){
				//vue会监听导数据变化，但是不会更新视图
				//this.books[index] = newBook 
        	this.books.splice(index, 1, newBook)
			},
			addBook(newBook){
				this.books.push(newBook)
			}
		}

添加一条数据


		

			序号：{{index}},书名:{{book.name}},价格：{{book.price}}
			 删除
			 更新
		
	

列表的过滤和排序

搜索过滤

步骤：

1.通过对话框绑定msgtext
2.通过过滤函数filterArr函数过滤掉已经被包含的数组，并返回这个新数组
3.迭代新的数组，并输出

关键代码如下：

//实现绑定

//迭代新生成数组元素，即输出新数组元素
v-for="(book,index) in filterBooks
//过滤方法，但是还是不是很清楚
//filterArr=books.filter(p=>p.name.indexOf(searchText)!==-1)这句的语法结构
computed:{
			filterBooks(){
				const{searchText,books,orderType}=this
				let filterArr=new Array();

				filterArr=books.filter(p=>p.name.indexOf(searchText)!==-1)
				return filterArr;
			}
		}

列表排序