Vue框架应用实战项目式教程 课件 任务2 招聘岗位数据渲染

1招聘岗位数据渲染任务2框架技术应用Vue不但改善了前端的开发体验，还极大地提高了开发效率。如何快速的将后台数据渲染到页面当中去，是本任务主要学习的知识。本任务将对Vue的基础知识进行讲解，内容包括数据的绑定、数据的渲染等。学习目标【知识目标】掌握Vue插值数据绑定的方法；掌握v-text和v-html指令的使用；掌握v-bind属性绑定指令的使用方法；了解Vue的双向数据绑定模式；掌握v-model指令的使用；掌握Vue的条件渲染、列表渲染。【技能目标】能够熟练使用渲染指令构建网页；能够熟练运用Vue基础知识创建Vue实例。【素质目标】培养审美意识，培育审美能力；在审美能力提升中，融入坚定文化自信，激发爱国主义情感。“就业职通车”网站最重要的功能当属“热门招聘”模块。人们可以通过该模块查询到当前各企业的招聘信息，同时企业也能在网站中发布自己的招聘岗位信息。该模块主要完成企业招聘信息录入、招聘岗位发布以及岗位信息展示等功能。如图1-1图1-1“就业职通网”效果图项目背景本任务要求实现“就业职通车”网站当中“热门招聘”模块，其中使用Vue3框架实现“热门招聘”中招聘信息填写、招聘岗位信息渲染等功能的布局与样式。“热门招聘”模块效果如图2-1所示。图2-1“热门招聘”模块效果图任务规划【任务陈述】本任务需要完成“热门招聘”模块中招聘简介部分。读者通过实现该任务从而掌握Vue插值数据绑定的方法。本任务实现效果如图2-2所示。任务2.1招聘数据渲染图2-2招聘简介效果图任务2.1招聘数据渲染【任务分析】本任务需要将“热门招聘”模块中招聘简介数据通过数据绑定的方式显示在界面上，任务流程如图2-3所示。图2-3任务流程图【任务实施】步骤一.在<script>中准备页面数据。<scriptsetup>import{ref}from'vue'import"./assets/css/bootstrap.css"constarticle=ref("就业职通网主要面向高效应届毕业生，实现就业政策解读、招聘信息浏览、简历投递等功能，以推动应届毕业生更充分、更高质量的就业。")</script>任务2.1招聘数据渲染【任务实施】步骤二.通过插值{{}}语法将文章数据渲染至页面中。<template>

<!--页面容器--><divclass="container"><main>

<!--文章内容--><divclass="py-5text-center"><imgclass="d-blockmx-auto"src="assets/img/logo.png"><pclass="lead">{{article}}</p></div></main></div></template>任务2.1招聘数据渲染【任务实施】步骤三.在控制台通过vuerundev指令进行编译。渲染结果如图2-4所示。任务2.1招聘数据渲染图2-4招聘简介效果图【知识链接】2.1.1插值语法数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值。其语法如下：<p>{{message}}</p>【例2-1】插值渲染实例。代码如下：<template><divid="app"><div><p>姓名:{{newP}}</p><p>年龄:{{newPerson.age}}</p><p>{{newPerson.school.schoolName}}-{{newPerson.school.grade}}</p><p>家庭成员:{{newPerson.family.toString()}}</p></div></div></template>任务2.1招聘数据渲染【知识链接】2.1.1插值语法<scriptsetup>import{reactive}from'vue'constnewPerson=reactive({name:"小明",age:7,school:{schoolName:"天天小学",grade:"一年级"},family:["爷爷","奶奶","爸爸","妈妈"]})</script>任务2.1招聘数据渲染【知识链接】2.1.1插值语法<stylescoped>#app{color:red;}</style>页面渲染效果如图2-5所示。任务2.1招聘数据渲染图2-5【例2-1】插值渲染效果图【知识链接】2.1.2v-text指令语法v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。读者可以将其理解为JavaScript中的innerText方法。【例2-2】v-text指令渲染实例。代码如下：<template><divid="app"><divv-text="textStr"></div></div></template><scriptsetup>import{ref}from'vue'consttextStr=ref('<astyle="color:red">红色</a>')</script>任务2.1招聘数据渲染【知识链接】2.1.2v-text指令语法代码运行效果如图2-6所示。图2-6【例2-2】v-text指令渲染效果图如图2-5所示，v-text指令并不能渲染HTML标签，而是将字符串原样输出到界面中。如果需要将字符串渲染为HTML标签，我们该如何操作呢？这就需要使用到v-html指令了。任务2.1招聘数据渲染【知识链接】2.1.3v-html指令语法v-html指令可用于HTML标签的渲染，类似于JavaScript中的innerHTML方法。例如，我们将上一个案例代码，通过v-html指令进行渲染。【例2-3】v-html指令渲染实例。代码如下：<template><divid="app"><divv-html="htmlStr"></div></div></template><scriptsetup>import{ref}from'vue'consthtmlStr=ref('<astyle="color:red">红色</a>')</script>任务2.1招聘数据渲染【知识链接】2.1.3v-html指令语法代码运行效果如图2-7所示。图2-7【例2-3】v-html指令渲染效果图注意：在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击，因此读者在设计网页界面时只在可信内容上使用v-html，不能用在用户提交的内容上。任务2.1招聘数据渲染【知识链接】2.1.4v-once指令语法v-once指令只渲染元素和组件一次。随后的重新渲染，元素或组件及其所有的子节点将被视为静态内容并跳过。【例2-4】v-once指令语法实例。代码如下：<template><divid="app"><divv-once>{{num}}</div><buttonv-on:click="add">num自增</button></div></template>任务2.1招聘数据渲染【知识链接】2.1.4v-once指令语法v-once指令只渲染元素和组件一次。随后的重新渲染，元素或组件及其所有的子节点将被视为静态内容并跳过。【例2-4】v-once指令语法实例。代码如下：<scriptsetup>import{ref}from'vue'constnum=ref(1)functionadd(){num++}</script>任务2.1招聘数据渲染【知识链接】如图2-8所示，单击“num自增”按钮，v-once绑定的标签内容并不会随之改变，说明v-once指令对数据仅进行了一次渲染。图2-8【例2-4】v-once指令渲染效果图任务2.1招聘数据渲染【任务陈述】Vue中的数据绑定功能极大地提高了开发效率。本任务需要完成“岗位信息”显示模块中企业标志的渲染效果。读者通过实现该任务从而掌握v-bind指令属性绑定的方法。本任务实现效果如图2-9所示。任务2.2企业标志渲染图2-9企业标志效果图【任务分析】本任务需要完成“岗位信息”显示模块中企业标志的渲染效果，任务流程如图2-10所示。任务2.2企业标志渲染图2-10任务流程图【任务实施】步骤一.在“热门招聘”模块基础上，通过import命令将图像导入。<scriptsetup>import{reactive,ref}from'vue'import"./assets/css/bootstrap.css"importavatar_biaozhi1from"./assets/img/biaozhi1.png"

//企业标志图片importavatar_biaozhi2from"./assets/img/biaozhi2.png"

//企业标志图片conststyleclass=reactive({ avatar_biaozhi1,avatar_biaozhi2})constmessageList=ref([//岗位数据任务2.2企业标志渲染【任务实施】{"id":110,"email":"lxm@",

"name":"华为技术有限公司",

"content":"招聘软件工程师若干名。在这里,你将从事IT应用层软件、分布式云化软件、互联网软件等的设计开发,可以采用敏捷、Devops、开源等先进的软件设计开发模式,接触最前沿的产品和软件技术，成为大容量高并发技术的专家。","scale":1,"support":37,"has_sup":true,"time":1678949430654},任务2.2企业标志渲染【任务实施】{"id":111,"email":"xxt@","name":"腾讯科技（深圳）有限公司",

"content":"招聘前端工程师10人，负责计费营销saas业务的前端开发工作，通过前端工程化、组件化、可视化的方法，实现前端UI表现和前端逻辑组件的快速生成。","scale":1,"support":60,"has_sup":true,"time":1675234219856},任务2.2企业标志渲染【任务实施】{"id":112,"email":"zqq@163.com","name":"网之易信息技术（上海）有限公司",

"content":"招聘运维工程师5人，负责IDC现场维护工作，保证基础设施正常运营环境，确保服务器等硬件设备稳定高效运行。本科或以上学历，计算机及相关专业，2年以上相关工作经验。","scale":1,"support":46,"has_sup":true,"time":1665284870606}])</script>任务2.2企业标志渲染【任务实施】步骤二.将企业标志属性通过v-bind指令进行绑定，并根据数据渲染出不同企业的标志。<template><divclass="d-flextext-mutedmb-3"><divclass="border-bottomcol-md-12"><img:src="messageList[0].scale==0?avatar_biaozhi1:avatar_biaozhi2"alt=""width="24"height="24"><strongclass="text-gray-dark">{{messageList[0].name}}</strong><p>{{messageList[0].content}}</p></div></div>​任务2.2企业标志渲染【任务实施】步骤二.将企业标志属性通过v-bind指令进行绑定，并根据数据渲染出不同企业的标志。<divclass="d-flextext-mutedmb-3">

<divclass="border-bottomcol-md-12">

<img:src="messageList[1].scale==0?avatar_biaozhi1:avatar_biaozhi2"alt=""width="24"height="24">

<strongclass="text-gray-dark">{{messageList[1].name}}</strong>

<p>{{messageList[1].content}}</p>

</div></div>​<divclass="d-flextext-mutedmb-3">任务2.2企业标志渲染【任务实施】步骤二.将企业标志属性通过v-bind指令进行绑定，并根据数据渲染出不同企业的标志。

<divclass="border-bottomcol-md-12"><img:src="messageList[2].scale==0?avatar_biaozhi1:avatar_biaozhi2"alt=""width="24"height="24">

<strongclass="text-gray-dark">{{messageList[2].name}}</strong>

<p>{{messageList[2].content}}</p>

</div></div></template>任务2.2企业标志渲染【任务实施】步骤二.将企业标志属性通过v-bind指令进行绑定，并根据数据渲染出不同企业的标志。我们通过v-bind:src=“messageList[0].scale==0?avatar_biaozhi1:avatar_biaozhi2"的三元表达式对不同企业的标志进行了区分渲染。对比起直接引用图片地址的方式，属性绑定更有利于我们后期的数据维护，一旦标志地址发生改变，我们仅需要在import指令中重新选择正确的图片路径即可。任务2.2企业标志渲染【任务实施】步骤三.在控制台通过vuerundev指令进行编译。渲染结果如图2-11所示。图2-11企业标志渲染效果图v-bind指令能够动态的绑定一个或多个属性值，相比起单向数据绑定而言，v-bind主要用于属性的绑定。合理应用v-bind指令，能够为后期的数据维护提供极大的便利。任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法v-bind指令主要用于响应式的更新html属性。如果需要在元素节点的属性上绑定Vue的数据，不能直接使用{{}}插入值语法来实现，需要使用v-bind指令来完成。v-bind用于给元素的属性赋值，可以实现属性单向数据绑定。v-bind语法为：v-bind:属性名=[变量名]。例如：v-bind:title="message"v-bind:可以缩写为:符号，例如：:title="message"v-bind指令常常用于绑定标签属性、样式等，它支持绑定数值、字符串、数组、对象或一个表达式。任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法例如：<!--绑定一个属性--><imgv-bind:src="imageSrc"><!--动态属性名--><buttonv-bind:[key]="value"></button><!--缩写形式--><img:src="imageSrc"><!--动态属性名缩写--><button:[key]="value"></button><!--内联字符串拼接--><img:src="'/path/to/images/'+fileName">任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法例如：<!--class绑定--><div:class="{red:isRed}"></div><div:class="[classA,classB]"></div><div:class="[classA,{classB:isB,classC:isC}]"></div><!--style绑定--><div:style="{fontSize:size+'px'}"></div><div:style="[styleObjectA,styleObjectB]"></div><!--绑定一个全是属性的对象--><divv-bind="{id:someProp,'other-attr':otherProp}"></div>任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法【例2-5】v-bind使用案例。如以下案例所示，通过v-bind指令将类名绑定至class属性中。<template><divid="app"><pv-bind:class="styleclass.a">v-bind用于属性绑定</p></div></template><scriptsetup>import{reactive}from'vue'conststyleclass=reactive({ a:"styleA",b:"styleB"})</script>任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法【例2-5】v-bind使用案例。如以下案例所示，通过v-bind指令将类名绑定至class属性中。<stylescoped>.styleA{color:red;}.styleB{color:blue;}</style>任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法渲染Vue得到如图2-12所示结果，Class样式名为“styleA”。图2-12【例2-5】v-bind使用效果图任务2.2企业标志渲染【任务陈述】本任务需要完成“热门招聘”模块中“发布岗位”表单的界面渲染效果。读者通过实现该任务从而掌握v-model指令的方法，实现数据双向绑定。本任务实现效果如图2-13所示。图2-13“发布岗位”表单渲染效果图任务2.3招聘表单设计【任务分析】本任务需要完成“热门招聘”模块中“发布岗位”表单的界面渲染效果。将表单中信息进行数据绑定。任务流程如图2-14所示。图2-14任务流程图任务2.3招聘表单设计【任务实施】步骤一.在“热门招聘”模块中定义岗位信息数据。<scriptsetup>import{ref}from'vue'importavatar_biaozhi1from"./assets/img/biaozhi1.png"importavatar_biaozhi2from"./assets/img/biaozhi2.png"constmessage=reactive({id:"",email:"",name:"",content:"",scale:0})</script>任务2.3招聘表单设计【任务实施】步骤二.通过v-model指令，绑定name属性至页面表单中。<inputtype="text"class="form-controlactive"id="name"placeholder="请输入企业名称"requiredv-model="">步骤三.通过v-model指令，绑定email属性至页面表单中。<inputtype="email"class="form-control"style="width:80%;"id="email"placeholder="name@"requiredv-model="message.email">步骤四.通过v-model指令，绑定scale属性至页面表单中。因为企业规模选择框是radio类型，是否选中是通过其checked属性进行判定的，所以我们需要使用v-model指令绑定checked属性，进行选中与否的判断。<!--企业规模：上市企业单选框--><inputid="male"name="scale"type="radio"class="form-check-input"requiredvalue="1"v-model="message.scale">上市企业<!--企业规模：非企业单选框--><inputid="female"name="scale"type="radio"class="form-check-input"value="0"v-model="message.scale">非上市企业任务2.3招聘表单设计【任务实施】步骤五.通过v-model指令，绑定content属性至页面表单中。<textareaclass="form-control"name=""id=""cols="30"rows="5"placeholder="请输入招聘岗位信息和要求"v-model="message.content"></textarea>步骤六.“岗位发布”表单渲染结果如图2-15所示。图2-15“岗位发布”表单渲染效果图通过在网页表单中输入数据，可见当页面数据发生变化时，message中数据也一并发生变化。将message中的数据进行更改并保存，页面的数据也将同步发生变化。由此可见，通过v-model指令实现了表单的双向数据绑定。任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法在原生Javascript的项目中，要获取用户输入框输入的内容，需要通过DOM对象的方式。在Vue项目中则不用这么繁琐，因为vue通过了指令v-model来实现数据的双向绑定。像输入框、单选框、复选框等类型的输入控件都可以通过v-model指令绑定其value值，实现双向数据绑定。所谓双向绑定，指的是Vue实例中的数据与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法v-model指令对单行文本框<input>进行数据绑定格式如下：<inputv-model="text">【例2-6】v-model单行文本框数据绑定案例。<template><divid="app"><p>{{message}}</p><inputtype="text"v-model="message"></div></template><scriptsetup>import{ref}from'vue'constmessage=ref('Helloworld')</script>任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法如图2-16所示，当修改输入框的value值时，p容器中的内容也随之发生变化，由此可见，当我们修改输入框中的值时，message中的数据也发生了相应的变化。图2-16【例2-6】v-model单行文本框数据绑定效果图任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法另外，v-model

还可以用于各种不同类型的输入，<textarea>、<select>

元素。它会根据所使用的元素自动使用对应的DOM属性和事件组合：文本类型的<input>和<textarea>元素会绑定valueproperty并侦听input事件；<inputtype="checkbox">和<inputtype="radio">会绑定checkedproperty并侦听change事件；<select>会绑定valueproperty并侦听change事件。v-model指令对多行文本框<textarea>进行数据绑定。注意在<textarea>中是不支持插值表达式的。需要使用v-model来替代。格式如下：<span>Multilinemessageis:</span><pstyle="white-space:pre-line;">{{message}}</p><textareav-model="message"placeholder="addmultiplelines"></textarea>任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法v-model指令对复选框进行数据绑定。单一的复选框，绑定布尔类型值，格式如下：<inputtype="checkbox"id="checkbox"v-model="checked"/><labelfor="checkbox">{{checked}}</label>v-model指令对单选按钮进行数据绑定格式如下：<div>Picked:{{picked}}</div><inputtype="radio"id="one"value="One"v-model="picked"/><labelfor="one">One</label><inputtype="radio"id="two"value="Two"v-model="picked"/><labelfor="two">Two</label>任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法v-model指令对<select>选择器进行数据绑定格式如下：<div>Selected:{{selected}}</div><selectv-model="selected"><optiondisabledvalue="">Pleaseselectone</option><option>A</option><option>B</option><option>C</option></select>任务2.3招聘表单设计【任务陈述】本任务需要将“岗位发布”模块中匿名发布功能进行页面渲染。读者通过实现该任务从而掌握条件渲染各种指令的使用方法。本任务实现效果如图2-17所示。图2-17匿名发布功能渲染效果图任务2.4匿名发布渲染【任务分析】本任务需要将“岗位发布”模块中匿名发布功能进行页面渲染。任务流程如图2-18所示。图2-18任务流程图任务2.4匿名发布渲染【任务实施】步骤一.首先我们设计评论列表用户匿名功能。为messageList招聘信息列表中的各项信息添加unnamed属性，用以表示该条招聘信息是否开启匿名选项。messageList:[

{

id:110,email:"",name:"网络技术公司",content:"招前端工程师20人",scale:0,

unnamed:false//匿名状态，设置为false，表示不开启匿名选项

}]任务2.4匿名发布渲染【任务实施】步骤二.在<template>中通过v-if指令绑定unnamed属性，用以判断是否渲染企业名称。<strongclass="text-gray-dark"v-if="!messagList[0].unnamed">

{{messageList[0].name}}</strong><strongclass="text-gray-dark"v-else>匿名用户</strong>如上所示，当v-if="!messageList[0].unnamed"中的表达式为true，则渲染企业名称，否则渲染匿名企业信息。注意在此我们需要使用v-if指令而非v-show指令。因为v-show只是简单地基于CSS的display属性进行切换信息是否隐藏，并未真正做到匿名的功能。任务2.4匿名发布渲染【任务实施】步骤三.在发表招聘信息表单中，通过切换按钮设计是否开启匿名的功能。在<template>中布局匿名开关代码。<divclass="col-12py-2">

<divclass="form-checkform-switch">

<inputclass="form-check-input"

type="checkbox"role="switch"

id="unnamed-switch">

<labelfor="unnamed-switch">匿名发布</label>

</div></div>任务2.4匿名发布渲染【任务实施】步骤四.为招聘信息message添加unnamed属性，用以表示是否开启匿名发布功能。constmessage=reactive({id:"",email:"",name:"",content:"",scale:0,unnamed:false//匿名状态})任务2.4匿名发布渲染【任务实施】步骤五.将unnamed属性通过v-model双向绑定到匿名评论按钮上。<divclass="col-12py-2">

<divclass="form-checkform-switch">

<inputclass="form-check-input"

type="checkbox"role="switch"

id="unnamed-switch"

v-model="message.unnamed">

<labelfor="unnamed-switch">匿名发布</label>

</div></div>任务2.4匿名发布渲染【任务实施】步骤六.“岗位发布”匿名企业功能渲染结果如图2-19所示。图2-19匿名企业功能渲染效果图任务2.4匿名发布渲染【知识链接】在Vue中，我们可以通过指令条件性的选择渲染某一块内容，此时我们就需要用到v-if系列指令，接下来我们一同来详细学习这些指令的使用。2.4.1v-if指令语法在Vue中，v-if用于根据表达式的真假来操作DOM元素，可以切换元素的创建和销毁；当表达式的值为true时，元素存在于DOM树中，表达式为false时，元素从DOM树中移除，其语法为v-if="表达式"。【例2-7】v-if使用案例。<template><divid="app"><buttonv-on:click="isShow=!isShow">显示/隐藏</button><divclass="ball"v-if="isShow"></div></div></template>任务2.4匿名发布渲染【知识链接】<scriptsetup>import{ref}from'vue'constisShow=ref(true)</script><stylescoped>.ball{ width:30px; height:30px; border-radius:30px; background:radial-gradient(blue,green); margin:20px;}</style>任务2.4匿名发布渲染【知识链接】渲染Vue得到如图2-20所示结果。图2-20【例2-7】v-if使用效果图单击“显示/隐藏”按钮，切换isShow的值，小球的可见性也随之产生变化。任务2.4匿名发布渲染【知识链接】2.4.2v-else指令语法v-else指令必须搭配v-if指令使用，如果没有v-if的存在v-else将变得毫无意义。其语法为：<divv-if="表达式">

表达式为true时，渲染该标签内容</div><divv-else>

表达式为false时，渲染该标签内容</div><template><divid="app"><divclass="ball"v-if="Math.random()>0.5"></div><divv-else>小球消失了</div></div></template>任务2.4匿名发布渲染【知识链接】【例2-8】v-else使用案例。<stylescoped>.ball{ width:30px; height:30px; border-radius:30px; background:radial-gradient(blue,green); margin:20px;}</style>此时如果“Math.random()>0.5”成立，“v-else”将不可见，反之，“v-else”的内容将变为可见。任务2.4匿名发布渲染【知识链接】2.4.3v-else-if指令语法当v-if、v-else两个指令无法满足多个条件的业务需求时，可以使用v-else-if增加多种情况的判断，v-else-if指令可以连续多个同时使用。任务2.4匿名发布渲染【例2-9】v-else-if使用案例。<template><divid="app"><divv-if="name==='小梦'">小梦</div><divv-else-if="name==='小明'">小明</div><divv-else-if="name==='小红'">小红</div><divv-else>都不是</div></div></template><scriptsetup>import{ref}from'vue'constname=ref('小明')</script>最终“小明”将被显示在页面中。【知识链接】2.4.4v-show指令语法v-show指令同样可以决定一个元素是否可见，v-show指令是通过改变元素的CSS属性（display属性）来决定元素是显示还是隐藏。【例2-10】v-show使用案例。<template><divid="app"><divv-show="false">v-show</div></div></template>任务2.4匿名发布渲染【知识链接】运行代码，在浏览器中通过F12键调出开发者工具，可见如图2-21所示代码。图2-21v-show实现原理代码图由此可见v-show是通过display:none的样式设置，将标签进行隐藏的。任务2.4匿名发布渲染【知识链接】2.4.5v-if和v-show指令区别控制手段不同。编译过程不同。编译条件不同。控制手段：v-show隐藏则是为该元素添加display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除。编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换。编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。v-show由false变为true的时候不会触发组件的生命周期。任务2.4匿名发布渲染【知识链接】2.4.5v-if和v-show指令区别v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法。性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；任务2.4匿名发布渲染【任务陈述】本任务需要将“热门招聘”模块中各企业发布的招聘岗位信息进行页面渲染。读者通过实现该任务从而掌握列表渲染等各种指令的使用方法。本任务实现效果如图2-22所示。图2-22招聘岗位列表渲染效果图任务2.5招聘岗位渲染【任务分析】本任务需要将“热门招聘”模块中各企业发布的招聘岗位信息进行页面渲染。任务流程如图2-23所示。图2-23任务流程图任务2.5招聘岗位渲染【任务实施】步骤一.在<template>中将原来企业招聘信息列表的代码删除，仅保留第一条企业招聘信息代码，作为列表数据模板。<divclass="text-mutedmb-3">

<!--企业招聘信息-->......</div>任务2.5招聘岗位渲染【任务实施】步骤二.使用v-for指令渲染列表数据，代码如下。<!--使用v-for指令渲染列表数据--><divclass="text-mutedmb-3"

v-for="(item,index)inmessageList"v-bind:key="item.id">

<divclass="border-bottomcol-md-12">

<imgclass="me-2"

width="24"height="24"

v-bind:src="item.scale==0?avatar_biaozhi1:avatar_biaozhi2">

<strongclass="text-gray-dark"v-if="!item.unnamed">

{{}}

</strong>

<strongclass="text-gray-dark"v-else>匿名发布</strong>

<p>

{{item.content}}

</p>任务2.5招聘岗位渲染【任务实施】步骤二.使用v-for指令渲染列表数据，代码如下。

<!--收藏样式-->

<divclass="message_sup">

<small></small>

<divv-bind:class="['support',{supportActived:item.has_sup}]"v-on:click="support(index)">

<imgsrc="./assets/img/support.png"alt="">

<span>{{item.support}}</span>

</div>

</div>

</div></div>需要注意的是key值不建议绑定数组的索引，一般而言每条数据都会有一个唯一的id，用来标识这条数据的唯一性，通常使用这个id作为key值。在Vue中，我们可以使用v-for指令渲染一组样式相同的列表或表格数据。接下来我们一同来详细学习v-for指令的使用。任务2.5招聘岗位渲染【知识链接】2.5.1v-for渲染数组v-for指令可用于渲染一组样式相同的列表或表格数据。v-for指令需要使用（item,key）initems形式的特殊语法。其中：items是源数据，例如一个数组或对象；item则是数组或对象中的每一项元素；key则指代数组的索引值或对象的键值，具有唯一性。v-for指令可用于渲染数组、对象、字符串等多种格式的数据。渲染数组是我们最为常用的方式。任务2.5招聘岗位渲染【知识链接】【例2-11】v-for数组渲染使用案例。<template><divid="app"><ul><liv-for="(item,index)inperson"v-bind:key="index">姓名：{{item}}</li></ul></div></template><scriptsetup>任务2.5招聘岗位渲染【知识链接】import{reactive}from'vue'constperson=reactive(["小城","丽丽","小希","张三"])</script></script><stylescoped>ul{list-style:none;}ulli:nth-child(2n+1){background-color:skyblue;}</style>任务2.5招聘岗位渲染【知识链接】渲染Vue得到如图2-24所示结果。图2-24【例2-11】v-for数组渲染效果图v-for指令中绑定的是person数组，item表示数组中的每一项元素内容，index表示当前元素的索引值。任务2.5招聘岗位渲染【知识链接】2.5.2v-for渲染对象v-for也可用于对象数据的渲染。【例2-12】v-for对象数组渲染使用案例。<template><divid="app"><ul><liv-for="(value,key)inperson"v-bind:key="value.id">学号：{{value.id}}-姓名：{{}}</li></ul></div></template>任务2.5招聘岗位渲染【知识链接】<scriptsetup>import{reactive}from'vue'constperson=reactive([{id:900108,name:"小军"},{id:900107,name:"丽丽"},{id:900308,name:"优优"},{id:900204,name:"小雄"},{id:900301,name:"大明"},])</script><stylescoped>ul{list-style:none;}ulli:nth-child(2n+1){background-color:skyblue;}</style>任务2.5招聘岗位渲染【知识链接】渲染Vue得到如图2-25所示结果。图2-25【例2-12】v-for对象数组渲染效果图因为是渲染对象类型的数据，我们可以将形参命名为key和value，这样代码能够更加语义化。其中key指对象的键值，value则是对应的属性值。任务2.5招聘岗位渲染【知识链接】2.5.3v-for渲染字符串v-for指令也可用于字符串格式数据的渲染。【例2-13】v-for字符串格式数据使用案例。<template><divid="app"><spanclass="span"v-for="(word,index)instr"v-bind:key="index">{{word}}</span></div></template><scriptsetup>import{ref}from'vue'conststr=ref('hello'