Vue中computed的使用

最新推荐文章于 2024-07-16 09:46:43 发布

键盘的打工仔

最新推荐文章于 2024-07-16 09:46:43 发布

阅读量166

点赞数

本文链接：https://blog.csdn.net/weixin_45616246/article/details/105620755

版权

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed的使用</title>
    <script src="../../vue/vue-v2.6.11.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>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: ''
        },
        computed: {
            // 注意1: 计算属性,在调用的时候不要加 () 去调用,把它当做普通属性使用即可
            /* 注意2: 只要计算属性的 function 中所用到的任何数据发生了改变,则会
                     重新对计算属性求值*/
            /* 注意3: 计算属性的结果会被缓存起来,方便下次直接使用,如果计算方法中
            *  所依赖的数据没有发生改变,则不会重新计算*/
            'fullName': function () {
                // 页面中调用了4次计算属性, 而控制台只打印了1次信息,
                // 证明计算属性的值被缓存起来了
                console.log('jhh');
                return this.firstName + '-' + this.lastName;
            }
        }
    });
</script>
</html>

键盘的打工仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中computed的使用

请陛下批阅<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>computed的使用</title> <script src="../../vue/vue-v2.6.11.js"></script...
复制链接

扫一扫