vue中的循环遍历对象、数组和字符串

v-for=" (val, key , i) in dimItemMap" :key="key"

<el-table-column prop="score" label="评分" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span>
                <span v-for=" (val, key , i) in scope.row.dimItemMap" :key="key">
                  {{val.score}}//score为键，val.score为值
                </span>
           </span>
       </template>
</el-table-column>

let data = [{ wiun2dvi: 232, wiun3dvi: 55, wiu4ndvi: 33, wiun1dvi: 24432 }];
    data.forEach((item,index)=>{
      for (const key in item) {
        console.log("item[key]",item[key]);//值
        console.log("key",key);//键
      }
    })

<el-table-column v-for="item in tableCol" :key="item.id" :prop="item.id" :label="item.name" :show-overflow-tooltip="true" align="center">
      <template slot-scope="scope">
           <span>{{scope.row.dimItemMap?scope.row.dimItemMap[item.id].name:""}}</span>
      </template>
</el-table-column>

<el-table-column prop="score" label="评分" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span>
                <span v-for=" (item, index) in scope.row.dimItemMap" :key="index">
                  {{item.score}}
                </span>
           </span>
       </template>
</el-table-column>

let id = 1524466
for (let i = 0; i < list.length; i++) {
        let a = list[i];
        if (a.id === id) {
          return a.name;
        } 
}

           let arr = [{
                name: 12,
                hello: "wsdfnioq",
            }, {
                name: 12,
                hello: "wsdfnioq",
            }, {
                name: 12,
                hello: "wsdfnioq",
            }]
            for (const i of arr) {
                console.log("i", i);
            }
//i {name: 12, hello: 'wsdfnioq'}
// i {name: 12, hello: 'wsdfnioq'}
 //i {name: 12, hello: 'wsdfnioq'}

let arr = [
    ['name', "张三"],
    ['地址', '北京'],
    ['手机', '123']
]
for (const [value0, value1] of arr) {
    console.log('k', value0, value1);
}
// k name 张三
// k 地址 北京
// k 手机 123

let arr = ["lsadnkol", "klsmvaod", "lpsaojfoas"]
for (const key in arr) {
    console.log("arr", key, typeof key, arr[key]);
}
// 0 string lsadnkol
// 1 string klsmvaod
// 2 string lpsaojfoas

    let forArr = [{name:'tom',sex:'man'},{name:'linda',sex:'woman'},]
     forArr.forEach((item,index) => {
        console.log("forEach循环==index==",index,item);
         item.age = 27
    })
    console.log("forArr==遍历后===",forArr)
   // forArr ---->[{name:'tom',sex:'man',age:27},{name:'linda',sex:'woman',age:27}]

let s = "abcd"
for (let i = 0; i < s.length; i++) {
      console.log(i, typeof i, s[i]); //i为索引,s[i]为值,typeof i 为number
}
//  0 number a
//  1 number b
//  2 number c
//  3 number d

let s = "abcd"
for (const key in s) {
    console.log("key", key, typeof key, s[key]); //key为索引,s[key]为值,typeof key 为string
}
// 0 string a
// 1 string b
// 2 string c
// 3 string d

let s = "abcd"
for (const i of s) {
    console.log("i", i);//i为值
}
// a 
// b 
// c 
// d

* 如果v-for遍历数组中的数组值
   语法格式：v-for="movie in movies"
   依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
     <li v-for="movie in movies"> {{movie}} </li>
* 如果v-for遍历数组中的数组值、索引值
     语法格式：v-for=(item, index) in items
      v-for中使用二个参数，即当前项和当前项的索引
      <li v-for="(item, index) in items">{{index}}. {{item}}</li>

<div id="app">
  <ul>
    <li v-for="name in names">{{name}}</li>
  </ul>
   //v-for遍历过程中，遍历数组中值,并显示
  <ul>
    <li v-for="(name,index) in names">{{index}}. {{name}}</li>
  </ul>
   //遍历过程中，遍历数组中值、索引值，并显示
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      names:["刘富楠","科比","詹姆斯","库里"]
    }
  })
</script>

<div id="app">
//展示出所有信息
  <ul>
    <li >{{info.name}}</li>
    <li >{{info.age}}</li>
    <li >{{info.height}}</li>
  </ul>
  //方法1.一个个写出来
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>
  //方法2.用v-for遍历对象的value值。(属性)
  <ul>
    <li v-for="(value,key) in info">{{value}}--{{key}}</li>
  </ul>
  //方法3.用v-for遍历对象的value值和key，value在前面。(属性和属性值)
  <ul>
    <li v-for="(value,key,index) in info">{{value}}--{{key}}--{{index}}</li>
  </ul>
  //方法4.用v-for遍历对象的value值、key和index。(属性和属性值和索引)
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
     info:{
        name:"lfn",
        age :18,
        height:180
      }
     }
  })
</script>    

<div id="app">
  <ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
  </ul>
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      letters:["A","B","C","D","E"]
    }
  })
</script>