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