课堂作业：根据所学的Vue基础知识，来实现一个可以通过点击实现图片的显示和隐藏

最新推荐文章于 2024-02-27 16:12:30 发布

Arciab

最新推荐文章于 2024-02-27 16:12:30 发布

阅读量635

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/analysis_ql/article/details/129679344

版权

这篇博客通过Vue基础知识展示了如何实现一个功能：点击图片使其显示或隐藏。使用Vue模板，结合v-show指令、@click事件及v-for循环，通过控制变量show的状态达到图片切换的效果。

摘要由CSDN通过智能技术生成

课堂作业：根据所学的Vue基础知识，来实现一个可以通过点击实现图片的显示和隐藏。

具体效果为网页进入时如下图所示，图片全部显示，当鼠标点击其中任意一张图片时，即实现图片的隐藏，效果图如下：

点击前图片全部正常显示：
请添加图片描述

任意点击其中任意图片即隐藏图片：
请添加图片描述

以下为代码部分：

使用Vue基础知识，先设置个最基本的框架,代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div class="ss">
			<div id="app">
				{
  {name}}
			</div>
		</div>
	</body>
	<script type="text/javascript">
       
		var vm = new Vue({
     
			el: "#app",
			data: {
     
				name:"EEE"
			}
		});
	</script>
</html>

定义一个Vue模板,使用css给这个模板设置一些样式，@click="change"设置一个点击事件，这个div盒子一旦被点击就会调用change函数。

id="tp"给这个模板设置一个标识。

v-show="show"设置图片是否显示，true为显示，false为隐藏。

src="im"设置图片路径为im这个字符串。

	<template id="tp">
		<div class="item" @click="change">
           <img :src

最低0.47元/天解锁文章

Arciab

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫