[JavaScript知识库] Vue数据过滤与this指向的问题

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue数据过滤与this指向的问题 -> 正文阅读

[JavaScript知识库]Vue数据过滤与this指向的问题

实例代码

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.24.0/dist/axios.js"></script>
</head>

<body>
    <div id="app">
        <div v-for="item in songs" :key="item.id">
            {{item.name}}========={{item.name|demoFn}}
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                songs: []
            },
            created() {
                this.getSongInfo();
            },
            //过滤要写在filters里!!不能写在methods里
            filters: {
                demoFn(data) {
                    if (data == "光年之外") {
                        return "原本是光年之外的,都被替换啦";
                    }
                    return data;
                }
            },
            methods: {
                getSongInfo() {
                    let url = "https://autumnfish.cn/search?keywords=光年之外";
                    // 注意注意!!!!,axios内部的this指向与这里的this指向不同,所以需在这转存一次.
                    let that = this;
                    console.log("axios外部的this",this);
                    axios.get(url).then(function (res) {
                        console.log("axios内部的this",this);
                        that.songs = res.data.result.songs;
                        for(i in that.songs){
                            //i 为键 ,再根据键获取值
                            console.log(i,that.songs[i]);
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>

数据过滤形式

前为待过滤的数据, “|” 后的为定义过滤规则的函数,以什么方式过滤

{{item.name|demoFn}}

data形参为待过滤的数据 item.name 传递过来的值.

//过滤要写在filters里!!不能写在methods里
            filters: {
                demoFn(data) {
                    if (data == "光年之外") {
                        return "原本是光年之外的,都被替换啦";
                    }
                    return data;
                }
            },

效果

在这里插入图片描述

this指向

 getSongInfo() {
                    let url = "https://autumnfish.cn/search?keywords=光年之外";
                    // 注意注意!!!!,axios内部的this指向与这里的this指向不同,所以需在这转存一次.
                    let that = this;
                    console.log("axios外部的this",this);
                    axios.get(url).then(function (res) {
                        console.log("axios内部的this",this);
                        that.songs = res.data.result.songs;
                        for(i in that.songs){
                            //i 为键 ,再根据键获取值
                            console.log(i,that.songs[i]);
                        }
                    })
                }