首先先观看实际图
一，准备素材
1，使用ps对图片进行切片
2，切片好的图片保存为web所用格式
保存到桌面后进行使用
二，VUE部分（软件推荐使用HBuilderx）
1.将准备好的图片拖进web文件中进行使用
2.代码部分
a.样式部分（根据图片进行设计大小格式，排序和整体样式.）
<style>
.content{
margin: 0 auto;
width: 1960px;
border: 1px solid indianred;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item{
margin:5px 0px;
height: 108px;
width: 191px;
background-color: #ccc;
}b.<div>部分文章来源：https://www.toymoban.com/news/detail-754790.html
<div id="app">
<div class="content">
<sss v-for="img in imgs" v-bind:im="img"></sss>
<!-- v-for对img进行遍历；v-bind可以实现属性单向绑定 -->
</div>
</div>
<template id="test1">
<div class="item"@click="change">
<!-- <img src="img/images/m_11.jpg" /> -->
<img :src="im" v-show="show" />
</div>
</template>c.组件部分文章来源地址https://www.toymoban.com/news/detail-754790.html
<script>
// // Vue.component("sss",{
// template:"<"img/images/m_01.jpg"/>"
// })
// 组件部分
Vue.component("sss",
{
template:"#test1",
props:["im"],<!--可以进行组件数据传递-->
data:f到了这里，关于使用VUE实现点击事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
