【Vue】侦听属性与过滤器 | watch与filters实例

最新推荐文章于 2023-04-07 08:51:27 发布

我想养只猫 •͓͡•ʔ

最新推荐文章于 2023-04-07 08:51:27 发布

阅读量2w

点赞数 8

分类专栏： # Vue 前端开发文章标签： vue vue.js

本文为博主原创文章，遵循【CC BY-NC-ND 4.0】版权协议，转载请附上原文出处链接和作者及本声明。

本文链接：https://blog.csdn.net/qq_41103843/article/details/121611663

版权

前端开发同时被 2 个专栏收录

35 篇文章 37 订阅

订阅专栏

Vue

4 篇文章 1 订阅

订阅专栏

侦听属性

在开发我们需要监听数据的变化，Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动，侦听属性。在实例 watch 选项中确定监听项。

语法

new Vue({         
    data: {
    	strTest: "abc",
    },
    watch: {
        strTest: function (newVal, oldVal) {
            console.log("新值：" + newVal)
            console.log("旧值：" + oldVal)
        }
    }
})

完整实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>侦听属性</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{ strTest }}</h1>
            <button @click="strReverse">反转</button>
        </div>
        <script>
            let vm = new Vue({
                el: "#app",
                data: {
                    strTest: "abc",
                },
                methods: {
                    strReverse: function () {
                        this.strTest = this.strTest.split('').reverse().join('');
                    }
                },
                watch: {
                    strTest: function (newVal, oldVal) {
                        console.log("新值：" + newVal)
                        console.log("旧值：" + oldVal)
                    }
                }
            })
        </script>
    </body>
</html>

当数值发生变化时, 将自动执行

注意 !

侦听属性不仅仅可用于针对数值变化, 而是监听属性事件, 可自定义触发事件

过滤器

计算属性和侦听属性，在数据处理环节中很有作用，但是用它来处理数据过滤不是最优的，在 Vue 中我们有一个专门处理数据过滤的东西：过滤器 filters

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)

语法

<p :class="strTest|add_123"></p>

let vm = new Vue({
    data:{
        strTest: "abc",
    },
    filters: {
        add_123: function (val) {
            return val + "123"
        }
    },
})

完整示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{ strTest|add_123 }}</h1>
        </div>
        <script>
            let vm = new Vue({
                el: "#app",
                data: {
                    strTest: "abc",
                },
                filters: {
                    add_123: function (val) {
                        return val + "123"
                    }
                },
            })
        </script>
    </body>
</html>

我想养只猫 •͓͡•ʔ

关注

8
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue】侦听属性与过滤器 | watch与filters实例

侦听属性在开发我们需要监听数据的变化，Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动，侦听属性。在实例 watch 选项中确定监听项。语法new Vue({ data: { strTest: "abc", }, watch: { strTest: function (newVal, oldVal) { console.log("新值：" + newVal) cons
复制链接

扫一扫