Vue-17、Vue人员列表过滤(案例)

这篇具有很好参考价值的文章主要介绍了Vue-17、Vue人员列表过滤(案例)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、watch实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染过滤</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>人员列表</h2>
    <input type="text" :placeholder="message" v-model="keyword">
    <ul>
        <li v-for="p in persons2" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            message:'请输入名字搜索',
            keyword:'',
            persons:[
                {id:'1',name:'马冬梅',age:18,sex:'女'},
                {id:'2',name:'周冬雨',age:20,sex:'女'},
                {id:'3',name:'周杰伦',age:21,sex:'男'},
                {id:'4',name:'文兆伦',age:22,sex:'男'},
            ],
            persons2:[
            ],
        },
       watch:{
            keyword: {
                immediate:true,
                handler(newvalue){
                    console.log(newvalue);
                    const  arr = this.persons.filter((p)=>{
                        return p.name.includes(newvalue);
                    });
                    this.persons2 = arr;
                }
            }
       }
    })
</script>
</body>
</html>

2、computed实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染过滤computed实现</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>人员列表</h2>
    <input type="text" :placeholder="message" v-model="keyword">
    <ul>
        <li v-for="p in persons2" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            message:'请输入名字搜索',
            keyword:'',
            persons:[
                {id:'1',name:'马冬梅',age:18,sex:'女'},
                {id:'2',name:'周冬雨',age:20,sex:'女'},
                {id:'3',name:'周杰伦',age:21,sex:'男'},
                {id:'4',name:'文兆伦',age:22,sex:'男'},
            ],

        },
        computed:{
            persons2(){
              const arr = this.persons.filter((p)=>{
                   return  p.name.includes(this.keyword);
                });
                return arr;
            }
        }
    })
</script>
</body>
</html>

Vue-17、Vue人员列表过滤(案例),vue,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-800176.html

到了这里,关于Vue-17、Vue人员列表过滤(案例)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.js 中的过滤器和计算属性

    Vue.js 是一款流行的 JavaScript 框架,它提供了一种简单而灵活的方式来构建交互式 Web 应用程序。在 Vue.js 中,过滤器和计算属性是两个常用的概念。它们可以帮助开发者更方便地处理数据,提高代码的可读性和可维护性。但是这两个概念有什么区别呢?本文将会详细介绍 Vue

    2024年02月08日
    浏览(50)
  • FE_Vue学习笔记 条件渲染[v-show v-if] & 列表渲染[v-for] 列表过滤 列表排序

    使用template可以使其里面的内容在html的结构中不变。条件渲染: v-if 1)v-if=“表达式” 2)v-else-if=“表达式” 3)v-else {} 适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被“打断”。 v-show 写法:

    2024年02月05日
    浏览(39)
  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(63)
  • 【工具】VUE 前端列表拖拽功能代码

    使用组件 yarn add sortablejs --save Sortable.js中文网 (sortablejs.com) 以下代码只是举个例子, 大家可以举一反三去实现各自的业务功能 DataList1.js DataList2.js

    2024年02月04日
    浏览(37)
  • 【案例实战】NodeJS+Vue3+MySQL实现列表查询功能

    这篇文章,给大家带来一个列表查询的功能,从前端到后端的一个综合案例实战。 采用vue3作为前端开发,nodejs作为后端开发。 首先我们先来看一下完成的页面效果。点击分页,可以切换到上一页、下一页。搜索框可以进行模糊查询。 后端项目开发 好的,那么看完项目的演

    2024年02月06日
    浏览(45)
  • 前端随笔:HTML/CSS/JavaScript和Vue

    最近因为工作需要,需要接触一些前端的东西。之前虽然大体上了解过 HTML 、 CSS 和 JavaScript ,也知道 HTML 定义了内容、 CSS 定义了样式、 JavaScript 定义了行为,但是却没有详细的学习过前端三件套的细节。而最近的工作中需要使用 Vue ,并且想到未来的工作中使用 Vue 能够更

    2024年02月16日
    浏览(44)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(59)
  • ​Vue + Element UI前端篇(二):Vue + Element 案例 ​

    打开 Visual Studio Code,File -- add Folder to Workspace,导入我们的项目。 安装依赖 Element 是国内饿了么公司提供的一套开源前端框架,简洁优雅,提供了 vue、react、angular 等多个版本,我们这里使用 vue 版本来搭建我们的界面。 访问:http://element-cn.eleme.io/#/zh-CN/component/installation ,官

    2024年02月09日
    浏览(42)
  • vue最强table vxe-table 虚拟滚动列表 前端导出

    最近遇到个问题。后台一次性返回2万条列表数据。 并且需求要求所有数据必须全部展示,不能做假分页(不能优化了)。 这些数据的直接来源就是CS客户端。 他们做CS客户端就是一次性加载几万条数据不分页(说这是客户的要求)。 我体验了一把CS客户端,数万条数据放在

    2024年02月12日
    浏览(41)
  • 前端Vue自定义简单好用商品分类列表组件 侧边栏商品分类组件

    前端Vue自定义简单好用商品分类列表组件 侧边栏商品分类组件 , 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13148 效果图如下: 使用方法 HTML代码实现部分

    2024年02月10日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包