首页 > 其他分享> > 【Vue】Vue中操作对【数组和对象】操作示例大全（图文+完整代码）

【Vue】Vue中操作对【数组和对象】操作示例大全（图文+完整代码）

2022-02-24 20:34:22 作者：互联网

一、【filter】按指定条件筛选、过滤数组与对象

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js操作数组大全</title>
</head>
<style>
    .old {
        background-color: rgb(234, 234, 234);
        width: 350px;
        height: auto;
        border: 1px rgb(70, 70, 70) solid;
        padding-left: 10px;
        padding-top: 15px;
        padding-bottom: 20px;
        padding-right: 10px;
        margin-bottom: 30px;
    }

    input {
        height: 20px;
        width: 200px;

    }

    .line {
        width: 100%;
        height: 2px;
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: rgb(187, 187, 187);
    }
</style>
<script src="vue.js"></script>

<body>

    <div id="arrlist">
        <div>
            <h5>======== 【filter】按指定条件筛选、过滤数组</h5>
            <div class="old">
                <div style="margin-bottom: 20px;">
                    <span v-for="(value,index) in mAges" :key="index"> {{value}} ,&emsp; </span>
                </div>
                <button @click="nClick">筛选(大于3,小于5)</button>
                <div class="line"></div>

                <div>
                    <span v-for="(value,index) in mCitys" :key="index"> {{value}} ,&emsp; </span>
                </div>

                <div>
                    <ul>
                        <li v-for="(value,index) in mStudents">
                            {{value.id}} - {{value.name}} - {{value.age}} - {{value.sex}}
                        </li>
                    </ul>
                </div>
                <div>
                    <input type="text" name="" id="" v-model:value="mText">
                    <button @click="mClick">开始过滤筛选</button>
                </div>

            </div>

        </div>

    </div>

</body>
<script type="text/javascript">

    // 通过Js操作数组和对象最详细实例（图文+完整源代码）

    var arrlist = new Vue({

        el: "#arrlist",
        data: {
            ages: [6, 3, 8, 1, 5, 4, 2, 7],
            citys: ["2.北京", "4.邯郸", "1.石家庄", "3.西安"],
            students: [
                { id: "01", name: "张飞", age: 18, sex: "男" },
                { id: "02", name: "燕飞", age: 20, sex: "女" },
                { id: "03", name: "孔明", age: 35, sex: "男" },
                { id: "04", name: "貂蝉", age: 17, sex: "女" },
                { id: "05", name: "孔融", age: 23, sex: "男" }
            ],
            mText: "",
            mCitys: "",
            mStudents: "",
            mAges: ""
        },
        methods: {

            // ======== 过滤筛选数组(>=3 and <=5)
            nClick() {

                this.mAges = this.ages.filter(
                    (value, index, SuiBian) => {
                        return (value >= 3 && value <= 5);
                    }
                );
            },
            // 过滤筛选数组和对象(包含某个字符)
            mClick() {

                // 一维数组筛选过滤

                this.mCitys = this.citys.filter(
                    (value, index, SuiBian) => {
                        return value.indexOf(this.mText) !== -1;
                    }
                );

                // 二维数组(对象)的筛选过滤

                this.mStudents = this.students.filter((p) => {
                    return p.name.indexOf(this.mText) !== -1;
                })
            }

        },
    })
    // 初始化数据
    arrlist.mAges = arrlist.ages;
    arrlist.mCitys = arrlist.citys;
    arrlist.mStudents = arrlist.students;

</script>

</html>

二、【filter】按指定条件筛选、过滤数组与对象

持续更新中......

标签：Vue,name,示例,age,arrlist,sex,value,操作,id
来源： https://blog.csdn.net/dxnn520/article/details/123120093