Vue框架应用实战项目式教程 实训指导书 实训指导书3：留言板-用户头像（3）.pdf

用户头像渲染

【任务描述】

将评论页中的用户头像属性通过v-bind指令进行绑定，并根据数据渲染出不同性别的头像。发

开

战

实

【实验环境】用

应

VisualStudioCode架

Node.js10.X及以上版本框

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

e

【任务实施】

u

（1）通过import命令将图像导入。

scriptsetup

V

import{ref,reactive}fromvue

import./assets/css/bootstrap.css;

importavatar_malefrom./assets/img/male.png//导入男性头像图片

importavatar_femalefrom./assets/img/female.png//导入女性头像图片

conststyleclassreactive({

avatar_male,

avatar_female

})

constmessageList=ref([

{

id:110,

name:李小萌,

email:,

content:Vue是一个如此优秀的框架,值得我们深入学习。,发

gender:0//性别，0代表女性，1代表男性

},开

{

id:111,

name:王小跳,战

email:,

content:Vue3我觉得很优雅,特别适合移动端开发。,实

gender:1

},

{用

id:112,

name:张全全,应

email:,

content:Vue真心让我省去了很多不必要的功夫,也很适合边开发边深入探究,这可能是这个框架最大的好处

,架

gender:1

}框

])e

}

/scriptu

（2）将用户头像属性通过v-bind指令进行绑定，并根据数据渲染出不同性别的头像。

V

divclass=d-flextext-mutedmb-3v-for=iteminmessageList:key=item.id

divclass=border-bottomcol-md-12

img:src=item.gender==0?styleclass.avatar_female:styleclass.avatar_male