Vue.js计算属性

概述

计算属性关键词: computed

计算属性在处理一些复杂逻辑时是很有用的，在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以

代码

<div id="app">
    <p>计算X1²+X2²-2X1+3X2,其中X1={{X1}},X2={{X2}}</p>
    <p>{{X1}} * {{X1}} + {{X2}} * {{X2}} - 2 * {{X1}} + 3 * {{X2}}=<span style="color: red">{{calculate}}</span></p>
    输入X1:<input type="text" v-model="X1">，
    输入X2:<input type="text" v-model="X2">
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            X1: 5,
            X2: 3
        },
        computed: {
            calculate: function () {
                return this.X1 * this.X1 + this.X2 * this.X2 - 2 * this.X1 + 3 * this.X2;
            }
        }
    })
</script>