zoukankan      html  css  js  c++  java
  • Vue_列表过滤应用

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>列表过滤应用</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <body>
            <div id="app01">
                <input type="" name="" id="" value="" @input="qqq" v-model="my_text"/>
                <ul>
                    <li v-for="data in w_list">
                        {{data}}
                    </li>
                </ul>
            </div>
            <script type="text/javascript">
                var vm = new Vue({
                    el:'#app01',
                    data:{
                        my_text:'',
                        w_list:['aaa', 'bbb', 'ccc', 'abc'],    // 实际使用的数据
                        d_list:['aaa', 'bbb', 'ccc', 'abc'],    // 备用数据
                    },
                    methods:{
                        qqq:function(){
                            // 过滤备用数据当中,包含用户输入内容的数据
                            var new_list = this.d_list.filter(item=>{
                                return item.indexOf(this.my_text)> -1
                            })
                            // 将过滤后的数据,赋值给实际使用的数据,显示再页面上
                            this.w_list = new_list
                        }
                    }
                })
            </script>
        </body>
    </html>

     2.计算属性方法:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>列表过滤应用</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <body>
            <div id="app01">
                <input type="" name="" id="" value="" v-model="my_text"/>
                <ul>
                    <!-- 遍历计算属性当中的方法 -->
                    <li v-for="data in my_list">
                        {{data}}
                    </li>
                </ul>
            </div>
            <script type="text/javascript">
                var vm = new Vue({
                    el:'#app01',
                    data:{
                        my_text:'',
                        w_list:['aaa', 'bbb', 'ccc', 'abc'],
                    },
                    computed:{
                        my_list:function(){
                            // 过滤w_list当中包含输入字符的内容
                            return this.w_list.filter(res=>{
                                // 查找输入的字符在数组中的每个字符串当中是否出现,如果返回值为-1则没出现,如果返回值大于-1则出现了
                                // indexOf方法:可返回某个指定的字符串值在字符串中首次出现的位置(下标),如果没输出则返回-1
                                return res.indexOf(this.my_text)>-1
                            })
                        }
                    }
                })
            </script>
        </body>
    </html>
  • 相关阅读:
    12306站点推出图片验证 反破解
    android自己定义控件之飞入飞出控件
    ORACLE 从一个实例迁移到另外一个实例实战记录
    通信协议:HTTP、TCP、UDP
    先打11.2.0.3.8这个PSU,后建库
    C# 多线程參数传递
    运维笔记10 (Linux软件的安装与管理(rpm,yum))
    为RecyclerView打造通用Adapter
    大话设计模式(四)单例模式
    Java代码质量监控工具Sonar安装
  • 原文地址:https://www.cnblogs.com/wangdianchao/p/13216832.html
Copyright © 2011-2022 走看看