Vue框架应用实战项目式教程 实训指导书 实训指导书5——发表留言（2）留言预览.pdf

留言预览Vue计算属性

【任务描述】

在vue中设置计算属性，使用户输入的信息能在预览框中进行预览，效果如下图所示。发

开

战

实

用

应

架

框

【实验环境】

e

VisualStudioCode

u

Node.js10.X及以上版本

V

Vue/cli脚手架4.5.0及以上版本

【任务实施】

（1）在script节点中定义computed计算属性，返回姓名，邮箱和性别的拼接结果。

scriptsetup

import{ref,reactive,computed}fromvue

//计算属性，预览

consttipcomputed({

get(){

if(message.email)return

letgendermessage.gender0?女:男

},return+,+gender+,+message.email发

set(val){开

letarrval.split(,)

arr[0]战

message.genderarr[1]女?0:1实

message.emailarr[2]

}用

})

/script应

（2）在template中绑定该计算属性。架

inputclasslist-group-itemlist-group-item-actionlist-group-item-successform-control

placeholder姓名,男性,name@

v-modeltip框

e

（5）在命令行窗口通过npmrunserve编译代码，运行效果如下所示。

u

V

【实验结论】

本章节主要学习computed属性的概念及使用方法，computed是根据依赖关系进行缓存计算，只有在它的相关依赖发

生改变时才会进行更新。