vue学习笔记： 8.计算属性-----computed

最新推荐文章于 2022-08-23 18:04:31 发布

哈哈哈宝

最新推荐文章于 2022-08-23 18:04:31 发布

阅读量127

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/weixin_44101052/article/details/86512315

版权

Vue学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

计算属性-----computed

在 computed 中可以定义一些属性,这些属性叫做【计算属性】,计算属性的本质是一个方法, 只不过,我们在使用这些计算属性的时候,只把它们的名称,直接当作属性来使用;并不会把计算属性当作方法去调用.
注意:

计算属性,在引用的时候,一定不要加 () 去调用,直接把它当作普通属性使用就好了
只要计算属性的 function 内部,所用到的任何 data 中的数据发生了改变,那么这个计算属性的值也随之改变
计算属性的求值结果,会被缓存起来,方便下次直接使用;如果,计算属性方法中,所依赖的数据都未发生变化,则不会对计算属性求值

简单代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>名称案例-使用computed实现</title>
    <script src="../lib/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="fullname">
        <p>{{ fullname }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstname: "",
                lastname: ""
            },
            computed: {
                "fullname": function() {
                    console.log("ok");
                    return this.firstname + "-" + this.lastname;
                }
            },
            methods: {
                
            }
        });
    </script>
</body>
</html>

哈哈哈宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记： 8.计算属性-----computed

计算属性-----computed在 computed 中可以定义一些属性,这些属性叫做【计算属性】,计算属性的本质是一个方法, 只不过,我们在使用这些计算属性的时候,只把它们的名称,直接当作属性来使用;并不会把计算属性当作方法去调用.注意:计算属性,在引用的时候,一定不要加 () 去调用,直接把它当作普通属性使用就好了只要计算属性的 function 内部,所用到的任何 data 中...
复制链接

扫一扫

专栏目录