【Vue】filter的用法

上一篇： 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的關鍵字作為屬性名

點擊刪除

?再刷新一下

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/167505.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/167505.shtml
英文地址，請注明出處：http://en.pswp.cn/news/167505.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！