<!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>
原文：https://www.cnblogs.com/yizhilin/p/14752812.html