课堂作业：根据所学的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元/天 解锁文章
716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
