vue快速入门(十二)v-key索引标志

注释很详细,直接上代码

上一篇

新增内容

  1. v-key的使用场景
  2. 数组筛选器的使用
    源码
html 复制代码
<!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>

效果演示

下一篇

相关推荐
Devil枫24 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果2 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰4 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端