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>
  • 相关阅读:
    Kprobes—insight into the Linux kernel—replace kernel function with module
    Go将统治下一个十年
    linux—网络仿真开源软件—network simulator—ns
    Serval Project——Android
    CentOS7—Firefox—截图工具—fireshot插件
    Wi-Fi Direct技术
    国产CPU迷局 龙芯该如何参与市场竞争
    《深入理解Android:Wi-Fi,NFC和GPS》—android源码下载
    wifi direct—深入理解Wi-Fi P2P
    c语言学习基础:[1]开发工具介绍
  • 原文地址:https://www.cnblogs.com/wangdianchao/p/13216832.html
Copyright © 2011-2022 走看看