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>

效果演示

下一篇

相关推荐
dr李四维2 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_16 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~24 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ27 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z32 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴36 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue