vue.js筛选功能（基于1.0版本）

最新推荐文章于 2024-06-01 11:16:50 发布
最新推荐文章于 2024-06-01 11:16:50 发布
阅读量571 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weshouldhelp/article/details/82772867
版权

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>

        <style type="text/css">
            #tb {
                width: 800px;
                border-collapse: collapse;
                margin: 20px auto;
            }
            
            #tb th {
                background-color: #0094ff;
                color: white;
                font-size: 16px;
                padding: 5px;
                text-align: center;
                border: 1px solid black;
            }
            
            #tb tr td {
                padding: 5px;
                text-align: center;
                border: 1px solid black;
            }
        </style>
        <script src="js/vue1026.js"></script>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="id" />
            <input type="text" v-model="pname" />
            <!--//筛选输入框-->
            <input type="text" placeholder="请输入筛选内容" v-model="sname" />
            <button @click="addData">添加</button>

            <table id="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
                <tr v-show="list.length == 0">
                    <td colspan="4">当前列表无数据</td>
                </tr>
                <!--筛选值绑定-->
                <tr v-for="item in list | filterBy sname in 'name'">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td>
                        <a href="javascript:void(0)" @click="delData(item.id)">删除</a>
                    </td>
                </tr>
            </table>
        </div>
    </body>

    <script>
        new Vue({
            el: '#app',
            data: {
                list: [{
                    id: 1,
                    name: '奔驰',
                    ctime: new Date
                }],
                id: 0,
                pname: '',
                sname: '' /*筛选值定义*/
            },
            methods: {
                addData: function() {
                    var p = {
                        id: this.id,
                        name: this.pname,
                        ctime: new Date()
                    };
                    this.list.push(p);
                    this.id = 0;
                    this.pname = '';
                },
                delData: function(id) {
                    if(!confirm('是否要删除数据')) {
                        return;
                    }
                    var index = this.list.findIndex(function(item) {
                        return item.id == id
                    })
                    this.list.splice(index, 1)
                }
            }

        });
    </script>

</html>

本文属于学习笔记

Caishunqi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 筛选功能
happyStudy_的博客
07-25 587
vue 编写产品筛选功能 根据行业筛选一级，（国家，价格，发布时间）列表带分页，按时间或者价格排序，以及分页设置10条/页码，20条/页码，50条/页码 以下代码 去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片. <div class="industries_cont clearfix"> <div class="indus_left"> <el-card class="box-card">
vue实现商品筛选功能
qq_41505416的博客
08-12 2636
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>实现商品筛选功能&lt
基于Vue实现的多条件筛选功能(类似京东和淘宝功能)
05-29
运用Vue实现的多条件筛选功能(类似京东和淘宝功能)，代码实现简单、容易理解
打造你的专属Vue组件：超实用“高级筛选弹窗组件“实战
最新发布
小猿同学628的博客
06-01 525
在现代前端开发中，组件化思想是提高开发效率、维护性和代码复用性的关键。本文将通过一个实例——创建一个自定义的“高级筛选”弹窗组件，来展示如何在Vue框架下利用Composition API和Element Plus构建功能丰富且易于集成的UI组件。下面的代码示例不仅展示了组件的结构、样式定制，还涉及了事件处理和属性传递，是一个全面的组件开发教程。
vue实现筛选功能
qq719756146的博客
12-05 1万+
template: &lt;template&gt; &lt;div class=""&gt; &lt;input type="text" v-model="str"&gt; &lt;ul&gt; &lt;li v-for="(item,$index) in list2" :key="
VUE实现移动端列表筛选功能
10-16
主要介绍了VUE实现移动端列表筛选功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue 简单数据筛选
qq_46032261的博客
10-30 4081
给大家分享一个简单的用vue实现数据筛选的代码，因为我下载了vue.js所以我是内联的，没有下载的同学可以去下载一下vue 官网 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="../vue.js"></script>
Vue.js实现实例搜索应用功能详细代码
10-19
文章提供了一个Vue.js实现搜索应用的实例，虽然由于识别错误原因未给出完整的代码和注释，但通过以上分析，我们可以得出实现一个基于Vue.js的搜索应用需要掌握的技术点和大致的实现逻辑。对于有兴趣深入了解的开发者...
【vue.js】自动计算（加法）小demo
weixin_39068791的博客
08-04 4305
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial
教育平台项目前端：Vue.js 入门
qq_40286307的博客
09-01 710
Introduction to Vue.js What is Vue.js Vue.js 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用。 Vue.js 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一 方面，当与 现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发（即插即用）。 官方网站: https://cn.vuejs.o
vue2升级到vue3
qq_36567538的博客
03-12 1554
存在的问题拓扑图多选框用到vue-dompurify-html，拖选时无法渲染框框感觉是vue-dompurify-html无法同步更新传入属性内容，还是为最初值拓扑图配置属性中的名称高度输入框设置后无法真正修改高度，高度其实是根据内容自动调整的，建议改为不可用。
Vue 筛选
weixin_45743799的博客
11-16 508
对数据进行筛选功能。 **功能分析：**当你输入一串文字时，以最快的速度筛选出相对应的内容，如果没有对应的内容则不予显示。 效果演示 原始样式 在输入框输入平板时筛选相应的内容 代码演示 **注意：**引入Vue.js架包 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
vue实现类目筛选功能
想好了再写！
08-29 815
类目筛选功能 代码如下：
vue案例---数据筛选
forever_zc的博客
02-19 1732
数据筛选
Vue实例：类目筛选功能
weixin_50981935的博客
07-10 1470
前言 类目筛选功能： 每行只能选中一个 选中的标签绑定不同的类，有不同的显示效果 点击“x”能去掉显示效果 一、css样式准备 <style> body { background: #b5abb3; } dl, dd, h3, p { margin: 0; } h3 { display: inline-block; }
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用
热门推荐
疑问 搜索 动手 解决 记录
03-25 2万+
一、效果图 目前10种筛选类型 看看是否是你需要的，本文可能有点长 ，我尽可能的给讲清楚，包括源码附上 二、前言 实现图中的表格，特定的两个要求，筛选条件的接口(返回多种类型及字段标识)，列表接口统一为一个，靠mark参数传输与后台商定好的标识，当然，如果你们的后端能够即能返回列表数据又能返回筛选条件的各种类型的标识也是极好的 。 表格中涉及到返回的数据是value（数字、id等类似select option里绑定的value）形式的，可能需要后端处理成label的形式返给前端，如同上图里的地区，
vue 筛选功能---filters
qq_42352516的博客
05-25 2074
Vue 前端做筛选功能—filters template: <el-table-column v-if="columnsStatus[10].checked" :sortable="columnsStatus[10].sortable" :prop="columnsStatus[10].column" :label="columnsStatus[10].label" :width="columnsStatus[10].width" show-overflow-tooltip :filte
vue表单筛选
luemeon的博客
07-31 1073
确定要删除数据吗?
vue2封装el-select，el-tree，支持筛选，实现TreeSelect的效果
weixin_72915006的博客
12-20 2592
7.父组件引用 记录开发日常，如有不足还望指出，感谢！
Vue.js中文1.0文档详解：入门到组件开发
Vue.js中文文档1.0 是一份全面介绍和教程的官方文档，旨在帮助用户理解和掌握这个流行的前端JavaScript框架。以下是该文档的核心知识点概要： 1. **概述**： - Vue.js是一种轻量级的MVVM（Model-View-ViewModel）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值