vue学习 计算属性

<template>
    <div>计算属性
        <div>---------------------------</div>
        <!-- <div>{{msg.split('').reverse().join('')}}</div> -->
        <div>{{reverseMsg}}</div>
        <!-- 注：vue模板语法中调用函数不用加（） -->
    </div>

</template>


计算属性   computed  的出现，是为了解决
避免在模板中写入太多js语法，而使模板难以维护

遵循  html 与 js 分离原则，将js逻辑代码统一放到computed属性内管理


<script>
export default {
    data(){
        return{
            msg:'hello world'
        }
    },
    computed:{
        reverseMsg(){
            return this.msg.split('').reverse().join('');
        }
    }
}
</script>