vue快速入门（十二）v-key索引标志

作者：Cpp五条 | 2024-04-10 11:43:55

踩

注释很详细，直接上代码

新增内容

v-key的使用场景
数组筛选器的使用

源码

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    #all{
      margin: 100px auto;
      padding-bottom: 10px;
      width: 300px;
      height: auto;
      background: linear-gradient(rgba(4, 226, 242, 0.5),rgba(3, 255, 117, 0.5));
      border-radius: 20px;
      box-shadow: 15px 15px 30px rgba(0,0,0,0.5);
    }
    #title{
      text-align: center;
      font-size: 27px;
      font-family: 楷体;
      font-weight: 800;
      padding-top:20px;
    }
    #all ul{
      list-style: none;
      margin: 0px 30px 10px 30px;
    }
    #all ul li{
      margin: 30px 0;
      height: 35px;
      line-height: 35px;
      padding: 0 25px;
    }
    #all ul div{
      display: inline-block;
    }
   #start{
      width: 110px;
    }
    li{
      background-color: #ffffff77;
      border-radius: 10px;
      backdrop-filter: blur(5px);
    }
    button{
      /* 鼠标样式 */
      cursor: pointer;
      border-radius: 5px;
      border: none;
      /* 其实没啥很明显的效果，单纯是不知道写啥好了 */
      box-shadow: 5px 5px 20px rgba(13, 239, 198, 0.5);
      background-color: rgba(0,0,0,0);
    }
  </style>
</head>
<body>
  <!-- 挂载点 -->
  <div id="root">
    <div id="all">
      <div id="title">
        收复失地
      </div>
      <ul>
        <!-- 重点就是这个v-key索引，简写:key 
             我们会设为自己的id-->
        <li v-for="(item,index) in areas" :key="item.id">
          <span>{{item.name}}</span>
          <div id="start">
            <span v-for="(item_1,index_1) in item.difficulty">⭐</span>
          </div>
          <button @click="dis(item.id)">征讨</button>
        </li>
      </ul>
    </div>
  </div>

  <!-- 导入vue的js代码 -->
  <script src="./lib/vue2.js"></script>

  <script>
    const app = new Vue({// Vue实例
      el: '#root',// 挂载点
      data: {// 数据
        areas:[
          {
            id:1,
            name:'蒙德',
            difficulty:1
          },
          {
            id:2,
            name:'璃月',
            difficulty:2
          },
          {
            id:3,
            name:'稻妻',
            difficulty:3
          },
          {
            id:4,
            name:'须弥',
            difficulty:4
          },
          {
            id:5,
            name:'枫丹',
            difficulty:5
          }
        ]
      },
      methods: {// 方法
        dis(id){
          // filter: 根据条件，保留满足条件的对应项，得到一个新数组
          this.areas=this.areas.filter(item=>item.id!=id)
        }
      }
    })
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

效果演示

在这里插入图片描述

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/398476