computed和watch

最新推荐文章于 2024-03-19 09:14:48 发布

TuMinQiang

最新推荐文章于 2024-03-19 09:14:48 发布

阅读量148

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/qq_42132814/article/details/109735433

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

Vue中的computed和watch

用二者来实现两个输入框内容的拼接：

效果：

在这里插入图片描述

watch的使用

watch监听，一般用于监听某些属性，发生改变后触发一些回调，watch支持异步，当需要在数据变化时执行异步或者开销较大时可以使用watch。

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>通过watch监听文本框数据的改变</title>
    <script src="../../vue包/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="firstname" />+
        <input type="text" v-model="lastname" />=
        <input type="text" v-model="finaname" />
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstname: "",
                lastname: "",
                finaname: ""
            },
            methods: {},
            watch: { //使用watch可以监听data中数据的变化，数据发生变化，就会触发function函数
                firstname: function (newval, oldval) {
                    //这是一种办法
                    //this.finaname=this.firstname+'-'+this.lastname;

                    //function提供了两个参数，newval和oldval分别表示更新后的数据和更新前的数据
                    this.finaname = newval + '-' + this.lastname;
                },
                lastname: function (newval) {
                    this.finaname = this.firstname + '-' + newval;
                }
            }
        });
    </script>
</body>

</html>

computed的使用

computed是计算属性，依赖其属性值，并且computed属性值是有缓存的，只有当它依赖的属性值发生了变化，下一次获取computed的值时才会被重新计算，computed不支持异步操作。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>通过computed监听文本框数据的改变</title>
    <script src="../../vue包/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="firstname"/>+
    <input type="text" v-model="lastname"/>=
    <input type="text" v-model="finaname"/>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            firstname: "",
            lastname: ""
        },
        methods: {},
        computed: {  //在computed中可以定义一些属性，这些属性叫做计算属性，计算属性本质上是一个方法，但是在使用时是把它们当做属性来用，并不会当做方法使用
            //只要当function内部使用的data数据发生了变化，就会重新计算他的计算属性的值
            //计算属性的值会计算后会被缓冲起来，以便下次使用，如果值没有 进行改变则不会重新对计算属性求值

            //计算finaname的值，get属性用于计算，且是默认有的方法，set需要自己定义
            finaname: {
                get() {
                    return this.firstname + " " + this.lastname;
                },
                set(value) {
                    //这个value就是finaname的值，一旦finaname的值发生变化就会触发这个set事件
                    console.log(value);
                    var arr = value.split(" ");//将value的值以空格切开，存入数组arr中去
                    console.log(arr[0]);
                    console.log(arr[1]);
                }
            }
        }
    });
</script>
</body>
</html>

TuMinQiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
computed和watch

Vue中的computed和watch用二者来实现两个输入框内容的拼接：效果：watch的使用watch监听，一般用于监听某些属性，发生改变后触发一些回调，watch支持异步，当需要在数据变化时执行异步或者开销较大时可以使用watch。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>通过watch监听文本框数据的改变<
复制链接

扫一扫