JavaScript indexOf 方法详解：数组与字符串查找

//语法
// array.indexOf(item,start) 
//item 必须 要查找的元素的位置，
//start 非必须可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
let food= ["番茄", "胡萝卜", "排骨", "苹果"];
let a = food.indexOf("苹果");
console.log(a) // 3
let b= food.indexOf("香蕉");
console.log(b) // -1

//语法
//string.indexOf(value,start)
// value  必须 要查找的元素的位置
// start 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string.length - 1。如省略该参数，则将从字符串的首字符开始检索。
let str="Hello world!";
console.log(str.indexOf("Hello"));//0
console.log(str.indexOf("World") );//-1
console.log(str.indexOf("world"));//6

<template>
    <div class="biaoqian">
                <button v-for="(item,index) in biaoqianList" 
                :key='index' 
                class="btn" 
                type="default" 
                size="mini"
                :class="{'active': isChange.indexOf(index)!=-1}" 
                @click="clickBtn(index)">{{item}}</button>
        </div>
</template>
export default{
        data(){
            return{
                isChange:[],  //多选
                biaoqianList:['早餐','午餐','晚餐','宵夜'],
                foodChose:[]
              }
            },
        methods:{
                clickBtn(index){
                    // 多选
                    if (this.isChange.indexOf(index) == -1) {
                        if(this.isChange.length == 4){
                            uni.showToast({
                                title:'最多选择四项',
                                icon:'none'
                            })
                        }else{
                            this.isChange.push(index);//选中添加到数组里
                        }
                    } else {
                        this.isChange.splice(this.isChange.indexOf(index), 1); //取消选中
                    }
                    console.log(this.isChange)
                    // let biaoqianList =  []
                    // for(let index in this.isChange){ //biaoqianList里面的索引重新加入
                    //     biaoqianList.push(this.biaoqianList[this.isChange[index]])
                    // }
                },
        }
}
<style lang="less">
    .biaoqian{
                display: flex;
                justify-content: start;
                align-items: center;
                .active{
                    background-color: #76d2f4 ;
                    color: white;    
                }
                .btn{
                border:0.01px solid #76d2f4;
                background-color:white ;
                color: #76d2f4;
            }
        }
</style>