Vue.js 初探计算属性

作者: Rinaloving | 来源:发表于2019-07-31 18:11 被阅读0次

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>什么是计算属性</title>
</head>
<body>
    <div id="app">
        {{ reversedText }}
    </div>
    <!--自动识别最新稳定版本的Vue.js-->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                text:'123,456'
            },
            computed:{
                reversedText:function(){
                    // 这里的this指向的是当前的Vue 实例
                    return this.text.split(',').reverse().join(',');
                    <!--所有的计算属性都是以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果-->
                }
            }

        })

    </script>

</body>
</html>

计算属性.png