<!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>