注释很详细，直接上代码
新增内容
- 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>
效果演示
