不会改变原始数组,但总是返回一个新数组
1.1.1 filter
filter() 方法创建一个新的数组,新数组中的元素是 通过检查指定数组中符合条件的 所有元素。
代码演示:
<div id="app">
<div>
<button @click="retain">保留非数字</button>
</div>
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
<hr>
<div>
<h2>通过filter过滤得到的新数组中的内容是:</h2>
<ol>
<li v-for="(value,index) in newList" :key="index">{{value}}</li>
</ol>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
list:[10,'apple',50,'orange',9,32,'banana',19,22,50],
newList:[]
}
},
methods:{
retain(){
this.newList=this.list.filter(function(item){
console.log(typeof item=='string');
return typeof item=='string'
})
}
}
})
</script>
预览:
1.1.2 concat
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
代码演示:
<div id="app">
<div v-for="(item,index) in list1" v-bind:key="index">{{item}}</div>
<hr>
<div v-for="(item,index) in list2" :key="index">{{item}}</div>
<div>
<button @click="_concat">连接</button>
</div>
<ul>
<li v-for="(item,index) in concatList" :key="index">{{item}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
list1:['apple','orange','banana'],
list2:['A','B','C'],
concatList:[]
}
},
methods:{
_concat(){
this.concatList=this.list1.concat(this.list2)
}
}
})
</script>
预览:
1.1.3 slice
slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组
代码演示:
<div id="app">
<div>
<button @click="_slice">点击截取</button>
</div>
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
list:['apple','orange','banana','pear','watermelon'],
}
},
methods:{
_slice(){
this.list=this.list.slice(2,4)
}
}
})
</script>
预览: