Day03-Vue的计算属性

Vue的计算属性

什么是计算属性

我们知道,在模板(dom)中可以直接通过一些插值语法来显示一些data数据,但是有些情况,我们需要对多个数据进行处理之后再进行展示

  • 比如,需要显示firstname和lastname:
    在这里插入图片描述
    在这里插入图片描述

computed:计算属性(其中也存放的function)


  <h2>{{Fullname}}</h2>
  <!--    computed计算属性 dom中用的时候不用加小括号-->


computed:{
          Fullname:function () {
                return this.firstname+' '+this.lastname
          }
        },

computed中不要起动词的名字,最好起属性的名字

computed的复杂操作

需求:在data中放一个数组books,里面有五本书,里面分别有书的各种属性,其中有一个属性为书的价格,要求在DOM中显示五本书的总价格

<div id="app">
    <h2>总价格:{{allPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            books:[
                {id:1,name:'课本一',price:10},
                {id:2,name:'课本二',price:10},
                {id:3,name:'课本三',price:10},
                {id:4,name:'课本四',price:10},
                {id:5,name:'课本五',price:10},
            ]
        },
        computed:{
            allPrice:function () {
                let result = 0;
                for(let i=0;i <this.books.length;i++){
                    result += this.books[i].price;
                }
                return result
            }
        }

    })
</script>

注意代码中的for循环
在这里插入图片描述

computed的完整写法

//完整的computed写法
       computed:{
            fullName:{
                set:function () {
                },
                get:function () {
                    return this.firstname+' '+this.lastname
                }
            }
        }
 //简写
  computed:{
            fullName:function () {
                return this.firstname+ ' '+this.lastname
            }
        }

在这里插入图片描述

computed(计算属性)和methods(方法)

computed有缓存,只要值不变换,就不会重复的用其中的方法,而methods每调用一次都会运行一次方法

<div id="app">
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>

    <h2>{{getFullname()}}</h2>
    <h2>{{getFullname()}}</h2>
    <h2>{{getFullname()}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            firstname:'ya',
            lastname:'nan'
        },
        computed: {
            fullName: function () {
                console.log('computed');
                return this.firstname +' '+this.lastname
            }
        },
        methods: {
            getFullname:function () {
                console.log('methods');
                return this.firstname+' '+this.lastname
            }
        }
    })
</script>

在这里插入图片描述

所以,computed的性能更高,不会浪费系统资源。

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页