一、关于vue
借鉴angular
的思想,由数据驱动,然后显示到视图层中,一般都是修改数据来改变视图,一般操作数据主要是操作数组或者对象
二、常见的数组的处理
1、
array.filter((currentVal,index,array)=>(),[thisArg])
解析:
filer()
中第一个参数是一个回调函数,第二个参数是可选的改变当时的this
,其返回依然是一个数组2、
array.map((currentVal,index,array)=>(),[thisArg])
解析
map
方法类似一个工厂,把当前数组元素进行进一步处理,返回加工后的数组3、
array.every((currentVal,index,array)=>(),[thisArg])
解析:
every
是判断数组中每个元素是否通过指定函数的测试,结果是一个布尔值4、
array.some((currentVal,index,array)=>(),[thisArg])
解析:
some
是数组中至少有一个元素满足就返回true
5、
array.reducer((previousVal,currentVal,index,array)=>(),[initialValue])
解析:
reducer
第一个参数是回调方法,第二个参数是可选的,作为第一次回调的第一个参数6、
ES6
中展开运算符...
1、 用于函数参数
function test(...arg) { console.log(arg); } test([1, 2, 3, 4], [1, 2]);
2、用于数组合并
var ary = [1, 2, 3]; console.log([...ary, 4, 5, 6, 7]);
3、解析赋值
const [c, d, ...rest] = [1, 2, 3, 4, 5]; const {a,b,...rest} = {a:1,b:2,c:3,d:4}; console.log(a, b, rest);
7、
ES3
中常见修改数组的方法- 1、
push
(尾部追加) - 2、
pop
(尾部删除) - 3、
shift
(头部删除) - 4、
unshift
(头部添加) - 5、
splice
(方法向/从数组中添加/删除项目,然后返回被删除的项目(2个参数是删除,3个参数是添加)), - 6、
sort
(排序) - 7、
reverse
(反转)
- 1、
三、vue
中对数组的操作
1、基本的添删排序
<div id="app"> <input type="button" value="push" @click="push" /> <input type="button" value="pop" @click="pop" /> <input type="button" value="shift" @click="shift" /> <input type="button" value="unshift" @click="unshift" /> <input type="button" value="addSplice" @click="addSplice" /> <input type="button" value="reduceSplice" @click="reduceSplice" /> <input type="button" value="sort" @click="sort" /> <input type="button" value="reverse" @click="reverse" /> <input type="button" value="filter" @click="filter" /> <input type="button" value="map" @click="map" /> <hr> {{ary}} </div>
var app = new Vue({ el: '#app', data: { ary: [1, 2] }, methods: { push() { this.ary.push(3) }, pop() { this.ary.pop(); }, shift() { this.ary.shift(); }, unshift() { this.ary.unshift(1); }, addSplice() { this.ary.splice(1, 1); }, reduceSplice() { this.ary.splice(1, 0, 5, 6); }, sort() { this.ary.sort((a, b) => (a - b)); }, reverse() { this.ary.reverse(); }, filter() { this.ary = this.ary.filter(item => (item % 2 == 0)); }, map() { this.ary = this.ary.map(item => (item * 2)); } } })
四、vue
中提供的方法
vue
实例化对象的原型上有$set
可以给data
中属性赋值
1、
$set
给data
中数组设置值setArray() { // 传递三个参数,第一个目标对象,第二的key(数组中下标),第三个参数是val //app.$set(this.ary, 2, 10); this.$set(this.ary, 2, 10); }
2、
$set
给data
中对象设置值setObject() { //app.$set(this.obj, 'name', '张三'); this.$set(this.obj, 'name', '张三'); }
五、利用上面的方法做一个搜索信息的案例
1、运行效果
2、
html
代码<div id="app"> <input type="text" placeholder="请输入搜索内容" v-model="searchText" /> <input type="button" value="搜索" @click="search" /> <ul> <li v-for="book of bookes">{{book}}</li> </ul> </div>
3、
js
代码var app = new Vue({ el: '#app', data: { bookes: ['三国演义', '红楼梦', '西游记', '水浒传'], searchText: '' }, methods: { search() { this.bookes = this.bookes.filter(book => (book.includes(this.searchText))) } } })