js数组方法及案例(vue)

方法

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

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

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

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

注意事项

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

案例

案例一、多选标签

描述： 一行或多行排列多个标签，当点击时，选中当前项并变色显示并添加到数组，再次点击时取消变色并从数组中移出。
注意事项： 数组是从后台获取的数据，当为数组的对象添加开关变量属性时，应使用res.data.list进行遍历，完成之后再赋值给data中定义的数据变量。
html:

<div id="app">
    <div class="box">
        <span 
            v-for="item in tags" 
            :key="item.id" 
            :class="{ active: item.isActive }"
            @click="change(item)">
                {{item.label}}
        </span>
    </div>
</div> 

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:

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
    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 );
                }              
            }
        }
    }) 
</script>

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

描述：
1、有两种类型可以选择，当选中类型一时，点击添加，类型一的form表单添加并显示，当选中类型二时，点击添加，类型二的form表单添加并显示。
2、当点击删除时，相应类型的form表单移除。
3、类型一和类型二都只能添加一个，两者相互独立且可以同时存在。
html:

<Row>
    <Col span="3">选择类型：</Col>
    <Col span="6">
        <Select v-model="typeShow">
            <Option v-for="item in typeArr" :value="item.value" :key="item.name">{{ item.name }}</Option>
        </Select>
    </Col>
    <Col span="6" offset="1"><p @click="chooseType">添加</p></Col>
</Row>
<div v-if="toggleTypeOne">
    <div>
        <span>(类型一)</span>    
        <div @click="deleteType(1)">删除</div>    
    </div>
    <form action="">表单一</form>
</div>
<div v-if="toggleTypeTwo">
    <div>
        <span>(类型二)</span>    
        <div @click="deleteType(2)">删除</div>    
    </div>
    <form action="">表单二</form>
</div>

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) {
      
    }
}

网站导航

网站导航