学习目标:
学习内容:
- 在vue中实现字符串的拼接:由于后端传给前端的二维码只是base64格式的数据,需要将‘data:image/png;base64,’和该数据拼接起来才能在前端展示出来。vue中各种字符串的拼接有多种方式:
(1)文件绑定{{}}中的字符串拼接:直接在{{}}内拼接:
<p>{{'data:image/png;base64,'+scope.row.act_img}}</p>
(2)vue标签属性绑定中的字符串拼接:写法有两种:
:title="字符串${xx}
" 或 :title="'字符串' + xx"
(其中,{}里面可以写js方法)
<img :src="'data:image/png;base64,'+scope.row.act_img">
(3)js中的字符串拼接:
是否确认切换状态为${row.isDelete === 1 ? '否' : '是'}?
${item.userName}(${item.account})
- 对所有活动的展示方法进行美化,修改为如下效果:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/659dc01ff95818886e9edf8d6e5ec38f.png)
代码如下:
<el-table-column label="活动名称">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>活动ID:{{scope.row.act_id}}</p>
<p>活动教室:{{scope.row.room_name}}</p>
<p>活动开始时间:{{scope.row.act_start_time}}</p>
<p>活动结束时间:{{scope.row.act_end_time}}</p>
<p>开始预约时间:{{scope.row.pick_start_time}}</p>
<p>截止预约时间:{{scope.row.pick_end_time}}</p>
<p>活动简介:{{scope.row.act_desc }}</p>
<p>活动二维码:</p>
<img :src="'data:image/png;base64,'+scope.row.act_img">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" style="background-color: white;">{{ scope.row.act_name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
- gitee上传,具体文件作用,练习使用gitee,从上面下载、上传代码,实现共同协作。
参考:添加链接描述
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9610a169c8fb693459d762f125af8ac9.png)