vue在js上处理后台返回的数组_js数组方法及案例(vue)

方法

indexOf() : (索引) - 返回数组中某个指定元素的位置,若没有则返回 -1

push() : (添加) - 将一个或多个元素添加到数组的末尾

splice(index, num) : (删除) - 删除从index位置处的num个数组项

reverse(): (反转数据) - 用于颠倒数组中元素的顺序，改变原数组。

注意事项

1、forEach不能中断循环，若需遍历完成之前返回结果，使用for循环

案例

案例一、多选标签

描述： 一行或多行排列多个标签，当点击时，选中当前项并变色显示并添加到数组，再次点击时取消变色并从数组中移出。

注意事项： 数组是从后台获取的数据，当为数组的对象添加开关变量属性时，应使用res.data.list进行遍历，完成之后再赋值给data中定义的数据变量。

html:

v-for="item in tags"

:key="item.id"

:class="{ active: item.isActive }"

@click="change(item)">

{{item.label}}

css:

.box {

width: 1000px;

height: 100px;

margin: 0 auto;

}

.box span {

padding: 2px 12px;

background: #FFFFFF;

border: 1px solid #EEEEEE;

border-radius: 14px;

font-size: 14px;

color: #666666;

text-align: center;

margin: 0 10px;

cursor: pointer;

}

.box .active {

border: 1px solid #FF7B43;

color: #FF7B43;

}

js:

new Vue({

el: '#app',

data: {

tags: [

{label: '选项一', id: '1', isActive: false},

{label: '选项二', id: '2', isActive: false},

{label: '选项三', id: '3', isActive: false},

{label: '选项四', id: '4', isActive: false},

{label: '选项五', id: '5', isActive: false}

],

tagsTemp: []

},

methods:{

change: function (item) {

item.isActive = !item.isActive;

if (item.isActive) {

this.tagsTemp.push(item.id);

} else {

this.tagsTemp.splice( this.tagsTemp.indexOf(item.id), 1 );

}

}

}

})

案例二、控制选项显示或隐藏

描述：

1、有两种类型可以选择，当选中类型一时，点击添加，类型一的form表单添加并显示，当选中类型二时，点击添加，类型二的form表单添加并显示。

2、当点击删除时，相应类型的form表单移除。

3、类型一和类型二都只能添加一个，两者相互独立且可以同时存在。

html:

选择类型：

{{ item.name }}

添加

(类型一)

删除

表单一

(类型二)

删除

表单二

js:

data () {

return {

// select选择框数据

typeShow: 1,

typeArr: [

{

name:"类型一",

value: 1,

},

{

name:"类型二",

value: 2,

}

],

// 控制显示隐藏

typeShowArr: [],

toggleTypeOne: false,

toggleTypeTwo: false,

}

},

watch: {

typeShowArr: {

handler(newVal, oldVal) {

// 控制显示类型一

let resultOne = newVal.indexOf(1)

if (resultOne !== -1) {

this.toggleTypeOne = true

}else {

this.toggleTypeOne = false

}

// 控制显示类型二

let resultTwo = newVal.indexOf(2)

if (resultTwo !== -1) {

this.toggleTypeTwo = true

}else {

this.toggleTypeTwo = false

}

},

deep: true

}

},

methods: {

// 选择添加类型

chooseType (){

let judgeAdd = this.typeShowArr.indexOf(this.typeShow)

if (judgeAdd === -1) {

this.typeShowArr.push(this.typeShow)

}else {

alert('每种类型只能添加一种')

}

},

// 删除类型

deleteType (index) {

let judgeDelete = this.typeShowArr.indexOf(index)

if (judgeDelete !== -1) {

this.typeShowArr.splice(judgeDelete, 1)

}

},

}

对最终选择数据的判断

if (this.typeShowArr.length === 2) {

// 两种类型

} else if (this.typeShowArr.length === 1) {

// 类型一

if (this.typeShowArr.indexOf(1) !== -1) {

// 类型二

}else if (this.typeShowArr.indexOf(2) !== -1) {

}

}

网站导航