首页 > 其他分享 >Vue列表过滤

Vue列表过滤

时间:2024-05-01 22:45:06浏览次数:19  
标签:el Vue name age sex 过滤 列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="main">
        <h2>企业家列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyword">
        <ul>
            <li v-for="(p,index) in filterPerson" :key="index">
                {{p.name}}---{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
     
        //创建一个Vue实例
        new Vue({
            el:'#main', //el用于指定容器,值通常为css选择器字符串
            
            data:{//data用于储存数据,数据供el所指定的容器使用
                persons:[
                    {name:'雷军',age:45,sex:'男'},
                    {name:'李连杰',age:45,sex:'男'},
                    {name:'李彦宏',age:43,sex:'男'},
                    {name:'马化腾',age:43,sex:'男'},
                    {name:'马云',age:50,sex:'男'},
                    {name:'王伟',age:50,sex:'女'}
                ],
                keyword:"",
            },
            computed:
            {
                filterPerson()
                {
                    return this.persons.filter((p)=>{return p.name.indexOf(this.keyword)!=-1});
                }
            }
        })
    </script>
</body>
</html>

 

 

标签:el,Vue,name,age,sex,过滤,列表
From: https://www.cnblogs.com/smallstone/p/18169757

相关文章

  • Vue .eslintrc.js
    Vue .eslintrc.jshttps://blog.csdn.net/weixin_33721344/article/details/88685833 Vue的Eslint配置文件eslintrc.js说明与规则介绍 最近在跟着视频敲项目时,代码提示出现很多奇奇怪怪的错误提示,百度了一下是eslintrc.js文件没有配置相关命令,ESlint的语法检测真的令人抓......
  • Vue | babel.config.js 配置详解
    babel.config.js 1概述Babel相当于一个中介,一边是用户,另一边是浏览器。这几年,JavaScript发生了很大的变化,许多新特性在很多浏览器里都不支持。Babel的主要作用就是规避这些问题,可以确保JavaScript代码兼容所有的浏览器,比如IE11。2Babel的工作原理Babel使用AST把......
  • Vue .gitignore
    Vue.js是一种流行的开源JavaScript框架,被广泛用于构建现代化的Web应用程序。Vue.js用于构建用于数据响应的单页面应用程序,但是在处理大型项目时可能会出现许多临时文件和配置文件,这些文件可以使用.gitignore文件从Git跟踪中排除。Vue.js有一个标准的.gitignore文件......
  • vue 项目构建之 jsconfig.json 作用
    目录   vue项目构建之jsconfig.json作用   VScode的配置vue项目构建之jsconfig.json作用   由于webpack别名配置好以后,如果想要在vscold中可以正确提示路径,就需要配置jsconfig.json文件:   再项目目录下创建jsconfig.json文件{ "compilerOptions":{   "base......
  • 启动vue项目时发生了什么
    简介最近在做vue项目时,遇到一些vuecli方面的报错,于是便想深入研究一下vuecli。这里先简单写一篇,如果有更细致的探究,再另作打算。执行npmrundev前提是你已经安装了node,并且附带了npm。执行npmrundev时,npm会自动搜索当前目录下的package.json,找到scripts配置项中的dev脚本......
  • Vue mockjs mock.js
    https://www.jianshu.com/p/0d6a0bdce55c?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendationhttps://blog.csdn.net/cuclife/article/details/131119983        操作步骤           1)安装mockjs和axios:  ......
  • Vue .browserslistrc
    Vue .browserslistrc 在使用脚手架搭建项目时,会自动生成.browserslistrc文件,该文件只要是配置兼容浏览器对于部分配置参数做一些解释:">1%":代表着全球超过1%人使用的浏览器“last2versions”:表示所有浏览器兼容到最后两个版本“notie<=8”:表示IE浏览器版本大于8......
  • Vue .eslintignore
    Vue .eslintignore项目根目录如果没有 .eslintignore文件,需要手动添加即可 用法如下指定某文件夹包括里面的所有文件都忽略buildsrc/assets指定某文件夹里面的指定文件类型都忽略build/*.js指定某文件夹里面的指定文件忽略src/index.js指定某文件夹里的除......
  • Vue 生命周期
    https://www.bilibili.com/video/BV1ub4y1i78b?p=2 第五章什么是vue3的生命周期https://www.bilibili.com/video/BV1ua4y1u7N8/  Vue生命周期created,mounted        Created和mounted的区别Created:是在组件实例一旦创建完成的时候立即调......
  • Vue main.js
    Vue main.jsmain.js是项目的入口文件,项目中所有的页面都会加载main.jsmain.js配置定义:main.js是项目的入口文件,项目中所有的页面都会加载main.js。主要有三个作用: 1.实例化Vue。 2.放置项目中经常会用到的插件和CSS样式。3.存储全局变量。项目创建完毕,main.js中会有......