Web全栈探索，Vue基础系列，常用特性（三）计算属性

1.为何需要计算属性？

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

2. 计算属性的用法

1.定义

computed: {
    自定义函数名称: function () {
        具体业务逻辑
    }
}

2.调用

<div>自定义函数名</div>

3.计算属性与方法的区别

  • 计算属性是基于它们的依赖进行缓存的
  • 方法不存在缓存

4.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <!--
    因为计算属性是基于 data 中的数据进行处理的，所以只要 data 里的数据变了，计算属性便会被激活
    -->
    <input v-model="name" aria-label="" type="text" placeholder="请输入您的姓名">
    <div>{{self_computed_function}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">

    let vm = new Vue({
        el: '#app',
        data: {
            name: 'hu hai'
        },
        methods: {
        },

        /*
            自定义计算属性, 函数名为 self_computed_function
        */
        computed:{
            self_computed_function: function () {
                return 'hello, ' + this.name + ' good night!'
            }
        }
    });
</script>
</body>
</html>


 

posted @ 2020-07-18 18:32  IT蓝月  阅读(91)  评论(0)  编辑  收藏  举报
Live2D