【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的关键字作为属性名

点击删除

再刷新一下

相关推荐
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript
LaoZhangAI1 小时前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试