web蓝桥杯真题：心愿便利贴

Outcir

于 2024-03-21 23:01:26 发布

阅读量153

点赞数 1

文章标签：前端蓝桥杯 javascript html

本文链接：https://blog.youkuaiyun.com/weixin_72707764/article/details/136923412

版权

代码及注释：

<!-- TODO 待修改的代码 -->
<div class="card" :class="item.css" v-for="(item,index) in wishList" :key="index">
	<div class="header">
		<img class="close" @click="closeCard(index)" src="./images/ding.png" alt="close">
	</div>
	<el-image
		v-if="item.pic"
		style="width: 100px; height: 100px"
		:src="item.pic" 
		:preview-src-list="picList">
		</el-image>
	<div class="content"> 
		{{item.content}}
	</div>
	<div class="name">{{item.name}}</div>
</div>

rules: {
	// TODO 待补充验证的代码
	name: [
		{ required: true, message: '请输入姓名', trigger: 'blur' },
		{ min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
	],
	content: [
		{ required: true, message: '请输入心愿内容', trigger: 'blur' },
		{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
	],
},