Vue框架应用实战项目式教程 实训指导书 实训指导书4——发表留言（1）留言数据绑定.pdf

发表留言Vue数据双向绑定

【任务描述】

将评论页中的表单信息进行数据绑定。发

开

战

实

用

应

架

框

e

u

V

【实验环境】

VisualStudioCode

Node.js10.X及以上版本

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

【任务实施】

（1）在data中定义留言数据。

scriptsetup

import{ref,reactive}fromvue

import./assets/css/bootstrap.css;发

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

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

//发表留言message数组战

constmessageref({实

id:,//id

name:,//姓名,默认为空用

email:,//邮箱,默认为空

content:,//留言内容，默认为空

应

gender:1,//性别,默认为1，即男性

})架

/script框

（2）通过v-model指令，绑定name属性至页面表单中。

e

inputtypetextclassform-controlidnameplaceholder您的姓名required

u

v-model

V

（3）通过v-model指令，绑定email属性至页面表单中。

inputtypeemailclassform-controlidemailplaceholdername@required

v-modelmessage.email

（4）通过v-model指令，绑定gender属性至页面表单中。因为性别选择框是radio类型，是否选中是通过其checked

属性进行判定的，所以我们需要使用v-bind指令绑定checked属性，进行选中与否的判断。

!--性别男单选框--

inputidmalenamegendertyperadioclassform-check-inputrequired

value1

v-modelmessage.gender

!--性别女单选框--

inputidfemalenamegendertyperadioclassform-check-input

value0

v-modelmessage.gender

发

（5）通过v-model指令，绑定content属性至页面表单中。开

textareaclassform-controlnameidcols30ro