one , Array call
* indexOf() Method returns the position of a specified element in the array .
* This method retrieves the array from beginning to end , See if it contains corresponding elements . The location to start retrieval is in the array start At the beginning of the or array （ Not specified start Parameter time ）. If you find one
item, Then return item Location of the first occurrence of . The index of the start position is 0.
* Returns if the specified element is not found in the array -1. // grammar // array.indexOf(item,start) //item must The location of the element to find ,
//start Non mandatory optional integer parameter . Specifies where to start retrieval in the array . Its legal value is 0 reach stringObject.length -
1. If this parameter is omitted , The retrieval will begin with the first character of the string . let food= [" tomato ", " Carrot ", " spareribs ", " Apple "]; let a = food.
indexOf(" Apple "); console.log(a) // 3 let b= food.indexOf(" Banana "); console.log(b) //
-1
two , String call
* indexOf() Method returns the first occurrence of a specified string value in a string .
* Case sensitive
* If the string value to retrieve does not appear , The method returns -1. // grammar //string.indexOf(value,start) // value must
The location of the element to find // start Optional integer parameters . Specifies the position in the string where retrieval begins . Its legal value is 0 reach string.length -
1. If this parameter is omitted , The retrieval will begin with the first character of the string . let str="Hello world!"; console.log(str.indexOf("Hello"
));//0 console.log(str.indexOf("World") );//-1 console.log(str.indexOf("world"))
;//6
three , Application examples
* Multiple choices can be realized
<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:[], // Multiple choice biaoqianList:[' breakfast '
,' lunch ',' dinner ',' night snack '], foodChose:[] } }, methods:{ clickBtn(index){ // Multiple choice if (this.
isChange.indexOf(index) == -1) { if(this.isChange.length == 4){ uni.showToast({
title:' Select up to four items ', icon:'none' }) }else{ this.isChange.push(index);// Select Add to array } }
else { this.isChange.splice(this.isChange.indexOf(index), 1); // Uncheck } console.
log(this.isChange) // let biaoqianList = [] // for(let index in this.isChange){
//biaoqianList The index inside is rejoined //
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.01
px solid #76d2f4; background-color:white ; color: #76d2f4; } } </style>
Technology