【Vue】filter的用法

上一篇: vue的指令

https://blog.csdn.net/m0_67930426/article/details/134599378?spm=1001.2014.3001.5502

本篇所使用指令 v-for v-on v-html

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的作用:根据条件,保留满足条件的对应项,得到一个新数组

html 复制代码
 methods:{

           del(id){
               this.list=this.list.filter(item=> item.id!=id)
           }
        }

注意: 方法名不能使用delete

意思是说 不能使用Javascript的关键字作为属性名

点击删除

再刷新一下

相关推荐
Justinc.3 分钟前
CSS3新增边框属性(五)
前端·css·css3
fruge10 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia19 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫20 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
十一吖i38 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年39 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_40 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891142 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾44 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking44 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js