上一篇： vue的指令
https://blog.csdn.net/m0_67930426/article/details/134599378?spm=1001.2014.3001.5502
本篇所使用指令 v-for v-on v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--准备容器 -->
<div id="app">
<h2>四大发明</h2>
<ul>
<li v-for="(item,index) in list">
<span>{{item.name}}</span>
<span>{{item.creator}}</span>
<button @click="del(item.id)">删除</button>
</li>
<br>
<div v-html="url"></div>
</ul>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 创建实例 -->
<script>
/* Vue.config.productionTip =false;*/
var app=new Vue({
el:'#app',
data: {
list:[
{id:1, name:'造纸术',creator:'蔡伦'},
{id:2, name:'指南针',creator:'栾(luan)大'},
{id:3, name:'火药',creator:'孙思邈'},
{id:4, name:'活字印刷术',creator:'毕升'},
],
url:'<a href="https://zhidao.baidu.com/question/37807254.html">百度知道</a>'
},
methods:{
del(id){
this.list=this.list.filter(item=> item.id!=id)
}
}
});
</script>
</body>
</html>filter的作用：根据条件，保留满足条件的对应项，得到一个新数组
methods:{
del(id){
this.list=this.list.filter(item=> item.id!=id)
}
}注意： 方法名不能使用delete
意思是说 不能使用Javascript的关键字作为属性名
点击删除
再刷新一下
