4，v-for循环 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    ul {
      list-style: none;
      display: flex;
    }
    .nav-li,
    .obj_li {
      margin: 0 20px 0 0;
      cursor: pointer;
    }
    .active11 {
      color: crimson;
    }
    .show1 {
      color: blue;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 遍历数组 -->
    <ul>
      <li class="nav-li" :class="{active11:curIndex ===index}" v-for="(items, index) in navs" @click="navsClick(index)">
        {{items}}</li>
    </ul>

    <!-- 遍历对象 -->
    <ul class="objul">
      <li class="obj_li" v-for="(value, key) in info">{{value}}</li>
    </ul>
    <!-- 加上 :key  key用来给每一个节点做一个唯一的标识，这样可以更高效的更新虚拟dom -->
    <ul>
      <li v-for="(item, index) in arr1" :key="item">{{item}}</li>
    </ul>

  </div>
</body>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      navs: ['菜单1', '菜单2', '菜单3'],
      curIndex: 0,
      info: {
        name: '张柏芝',
        age: 19,
        sex: '女'
      },
      arr1: ['A', 'B', 'C', 'D']
    },
    computed: {
      newArr1() {
        // splice添加元素 在第2个位置，添加一个元素 e
        let arr2 = arr1.splice(2, 0, 'e');
        // splice删除数组, 在第2个位置删除1个元素
        let arr3 = arr1.splice(2, 1)
        return arr2;

        // splice作用：删除元素/插入元素/替换元素/
        // 删除元素：第二个参数传入0
      }
    },
    created: function () {},
    methods: {
      navsClick(i) {
        this.curIndex = i;
      }
    }
  })
</script>

</html>

 

 
posted @ 2021-05-10 20:59  云悠  阅读(77)  评论(0)    收藏  举报