使用Vue3组件的计算属性

【例3.5】  使用计算属性（源代码\ch03\3.1.html）。

<div id="app">
    原始字符串：<input type="text" v-model="message"><br/>
    反转后的字符串：{{reversedMessage}}
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             message: '海角逢春，天涯为客。'
           }
        },
        computed: {
            //计算属性的getter
            reversedMessage(){
                return this.message.split('').reverse().join('');
            }
        }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>

在Chrome浏览器中运行程序，输入框下面会显示对象的反转内容，效果如图3-5所示。

在上面的示例中，当message属性的值发生改变时，reversedMessage的值也会自动更新，并且会自动同步更新DOM部分。

在浏览器的控制台中修改message的值，按回车键执行代码，可以发现reversedMessage的值也发生了改变，如图3-6所示。

本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。