change(id) {
    this.childMenu = this.menu[this.menu.findIndex(menu=> menu.id === id)].data
}

---

this is defined in

as defined in ES6's new" arrow-function "syntax
specification.

you can use babel to convert the ES6 syntax into ES5 and see what it does.

to learn the new grammar of ES6, you can go to
teacher Ruan Yifeng's ide tutorial
or
Dr. Axel Rauschmayer course-level book on each stage of ES http://exploringjs.com/

.

---

you can interpret it this way

      //id
      let index = this.menu.findIndex(function(menu){
        // menu id menu id
        //true ,false,
        //truefindIndexitem index 
        return menu.id === id 
      })

        // childMenu menu[index].data 
      this.childMenu = this.menu[index].data

document address: http://www.runoob.com/jsref/j.

findIndex can pass three parameters
the first is the current element
the second is the index of the current element
the third is the array object to which the current element belongs

---

this is the Filter function, which satisfies the need to return true, if you add it, otherwise it will be dropped by Filter

---

change(id) {
    this.childMenu = this.menu[this.menu.findIndex(menu=> menu.id === id)].data
}

this line of code is very simple. If you look at the naming, you should know that you should switch menu options according to the id of the submenu. When you encounter this kind of nested code, you only need to look at it one layer at a time. Start with the innermost layer (normally there should be a context here, but from the method called, you can determine that this.menu is an array),

this.menu.findIndex(menu=> menu.id === id)

If you don't know what this sentence means, just search findIndex, to know that the function of this method is to return the subscript index, of eligible elements.

this.menu[this.menu.findIndex(menu=> menu.id === id)]
//
this.menu[index]

clearly, get the elements of the specified subscript in the array

this.menu[this.menu.findIndex(menu=> menu.id === id)].data
//
this.menu[index].data

then assign a value to the submenu object this.childMenu , ok. Let's take a look at the complete simulation

//js file
this.menu = [{id:0, data:""}{id:1, data:""}, {id:2, data:""}, {id:3, data:""}];
this.childMenu = "";

change(id) {
    this.childMenu = this.menu[this.menu.findIndex(menu=> menu.id === id)].data
}

//html file,id
<ul>
    <li click="change(0)"></li>
    <li click="change(1)"></li>
    <li click="change(2)"></li>
    <li click="change(3)"></li>
</ul>
//  
change(id) {
    this.childMenu = this.menu[this.menu.findIndex(menu=> menu.id === id)].data
    // id  1
    // this.menu.findIndex(menu=> menu.id === id) id1  1
    // this.menu[1].data 1,data 
    // this.childMenu = ""; 
}

it's actually over here. However, we can also see that the data in this code is designed to be somewhat redundant and can be optimized

.

//js file
// this.menu,url
this.menu = [
    {text:"", url:"https://segmentfault.com"},
    {text:"CSDN", url:"https://www.csdn.net"},
    {text:"", url:"https://www.imooc.com"},
    {text:"Stack Overflow" url:"https://stackoverflow.com"}
];
this.childMenu = "";

change(id) {
    this.childMenu = this.menu[this.menu.findIndex(menu=> menu.id === id)].data
}

//html file,id
<ul>
    <li click="change(0)"></li>
    <li click="change(1)">CSDN</li>
    <li click="change(2)"></li>
    <li click="change(3)">Stack Overflow</li>
</ul>
//  
change(index) {// index
    this.childMenu = this.menu[index];
    // index  0
    // this.childMenu = {text:"", url:"https://segmentfault.com"}; 
    // 
}