VUE框架实现过滤查询将筛选后的数组信息展示在页面上------VUE框架

旧约Alatus

已于 2023-11-30 23:04:34 修改

阅读量973

点赞数 21

分类专栏： # VUE框架前端文章标签： vue.js 前端 javascript 前端框架 ecmascript js vue

于 2023-11-30 11:06:19 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134707504

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        th,td{border: 1px solid black;}
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg"/>
        <table>
            <tr>
                <th>序号</th>
                <th>英雄</th>
                <th>能量值</th>
                <th>选择</th>
            </tr>
            
            <tr v-for="(hero,index) in newH" :key="hero.id">
                <td>{{index}}</td>
                <td>{{hero.name}}</td>
                <td>{{hero.power}}</td>
                <td><input type="checkbox"/></td>
            </tr>
        </table>
        <button @click="addHero()">按一下</button>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "",
                heros : [
                    {id:"101",name:"Jerry",power:10000},
                    {id:"102",name:"Tom",power:9000},
                    {id:"103",name:"Jack",power:8000},
                    {id:"104",name:"Rose",power:6000}
                ],
                // 给一个新数组,初始为空
                newH : []
            },
            methods : {
                addHero()
                {
                    this.heros.unshift({id:"1000",name:"Top",power:4000});
                }
            },
            watch : {
                msg : {
                    deep :true,
                    // 打开网页立刻执行一次,不至于空白
                    immediate : true,
                    handler(newValue,oldValue)
                    {
                        this.newH = this.heros.filter((hero) => {
                            return hero.name.indexOf(newValue.toLowerCase()) >= 0 || hero.name.indexOf(newValue.toUpperCase()) >= 0;
                        });
                    }
                }
            }
        });
        // filter不会破坏元素结构,会生成新的数组
        let arr = [1,2,3,4,5,6,7,8,9];
        arr.filter((num) => {
            return num > 5;
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="../js/vue.js"></script>

<style>

th,td{border: 1px solid black;}

</style>

</head>

<body>

<div id="app">

<input type="text" v-model="msg"/>

<table>

<tr>

<th>序号</th>

<th>英雄</th>

<th>能量值</th>

<th>选择</th>

</tr>



<tr v-for="(hero,index) in newH" :key="hero.id">

<td>{{index}}</td>

<td>{{hero.name}}</td>

<td>{{hero.power}}</td>

<td><input type="checkbox"/></td>

</tr>

</table>

<button @click="addHero()">按一下</button>

</div>

<script>

const vm = new Vue({

el : "#app",

data : {

msg : "",

heros : [

{id:"101",name:"Jerry",power:10000},

{id:"102",name:"Tom",power:9000},

{id:"103",name:"Jack",power:8000},

{id:"104",name:"Rose",power:6000}

],

// 给一个新数组,初始为空

newH : []

},

methods : {

addHero()

{

this.heros.unshift({id:"1000",name:"Top",power:4000});

}

},

watch : {

msg : {

deep :true,

// 打开网页立刻执行一次,不至于空白

immediate : true,

handler(newValue,oldValue)

{

this.newH = this.heros.filter((hero) => {

return hero.name.indexOf(newValue.toLowerCase()) >= 0 || hero.name.indexOf(newValue.toUpperCase()) >= 0;

});

}

}

}

});

// filter不会破坏元素结构,会生成新的数组

let arr = [1,2,3,4,5,6,7,8,9];

arr.filter((num) => {

return num > 5;

});

</script>

</body>

</html>