<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background-color: greenyellow;
}
.content {
width: 860px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
img {
width: 80px;
height: 53px;
}
.item {
width: 80px;
height: 53px;
margin: 1px 0px;
background-color: #ccc;
}
</style>
<script type="text/javascript" src="js/vue.js" charset="UTF-8">
</script>
</head>
<body>
<div id="app">
<div class="content">
<test-div v-for="i in imgs" :im="i"></test-div>
</div>
</div>
<template id="fu-temp">
<div class="item" @click="change">
<img :src="im" v-show="show" />
</div>
</template>
<script>
Vue.component("test-div", {
template: "#fu-temp",
props: ["im"],
data: function() {
return {
show: true,
img:"img/vue12_01.gif"
}
},
methods: {
change: function() {
this.show = !this.show
}
}
});
var vm = new Vue({
el: "#app",
data: {
imgs: ["img/vue12_01.gif", "img/vue12_02.gif", "img/vue12_03.gif", "img/vue12_04.gif", "img/vue12_05.gif", "img/vue12_06.gif", "img/vue12_07.gif", "img/vue12_08.gif", "img/vue12_09.gif", "img/vue12_10.gif", "img/vue12_11.gif",
Vue及自定义组件完成10×10图片表格点击效果
于 2023-03-21 13:59:59 首次发布
本文介绍了如何使用Vue.js和自定义组件来创建一个10×10的图片网格,并实现点击图片后隐藏的效果。首先展示未点击和点击后的效果对比。接着,通过在CSS中使用弹性布局进行页面布局,然后定义一个自定义组件,包括template、props和methods。methods中定义了点击事件,实现图片显示状态的切换。最后,展示了Vue实例的数据和挂载目标。
摘要由CSDN通过智能技术生成