vue制作点击切换图片效果的详细思路与步骤
作者：Tԅ(¯ㅂ¯ԅ)
这篇文章主要给大家介绍了关于vue制作点击切换图片效果的详细思路与步骤,图片切换是一个很经典的Vue入门学习案例,在你学习完一些基本的v-指令后,你可以尝试去写一个简单的demo去巩固和熟悉这些指令的使用方法,需要的朋友可以参考下
思路
创建一个数组，数组里面放入图片，利用props（父组件向子组件传值），v-for（循环），v-bind（绑定属性）将图片传入HTML定义的div中。
Ⅰ.在头部导入vue文件（导入前提是vue文件已被引入js中）
<script src="js/vue.js"></script>
Ⅱ.在HTML中创建一个z-div（可根据自己喜好命名），用来接收组件的传值，用v-for使数组元素遍历循环以此显示图片，v-bind绑定im（im定义在script标签中的全局组件中），变量i传入im中。
<div id="app">
<z-div v-for="i in img" :im="i"></z-div>
</div>Ⅲ.定义一个组件<template>,里面写入需要传给z-div的数据，用v-bind绑定src元素，接受组件的传值。
<template id="imgs">
<div id="box" @click="change">
<img :src="im" alt="" v-show="show">
</div>
</template>Ⅳ.在script标签里面定义一个全局组件（全局组件要在创建Vue实例之前注册），并使用props属性定义一个im（数组中的im是变量通过属性绑定，绑定到子组件身上）。
Vue.component( 'z-div', {
template: '#imgs',
props: [ 'im' ],
data: function ()
{
return {
show: true
}
},
methods: {
change: function ()
{
this.show = !this.show
}
}
} )Ⅴ.定义一个新的Vue，并在里面定义一个数组，里面放入我们需要的图片。
var vm = new Vue( {
el: '#app',
data: {
img: [
'img/222_01.jpg',
'img/222_02.jpg',
'img/222_03.jpg',
'img/222_04.jpg',
'img/222_05.jpg',
'img/222_06.jpg',
'img/222_07.jpg',
'img/222_08.jpg',
'img/222_09.jpg',
'img/222_10.jpg',
'img/222_11.jpg',
'img/222_12.jpg',
'img/222_13.jpg',
'img/222_14.jpg',
'img/222_15.jpg',
'img/222_16.jpg',
'img/222_17.jpg',
'img/222_18.jpg',
'img/222_19.jpg',
'img/222_20.jpg',
'img/222_21.jpg',
'img/222_22.jpg',
'img/222_23.jpg',
'img/222_24.jpg',
'img/222_25.jpg'
]
}
} )Ⅵ.编辑样式
* {
margin: 0;
padding: 0;
}
#app {
width: 550px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
img {
width: 108px;
height: 138px;
}
#box {
width: 108px;
height: 138px;
background-color: pink;
margin: 1px 0px;
}效果图如下
完整代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
// 引入vue
<script src="js/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 550px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
img {
width: 108px;
height: 138px;
}
#box {
width: 108px;
height: 138px;
background-color: pink;
margin: 1px 0px;
}
</style>
</head>
<body>
<div id="app">
//v-for定义循环，v-bind绑定属性
<z-div v-for="i in img" :im="i"></z-div>
</div>
<template id="imgs">
<div id="box" @click="change">
<img :src="im" alt="" v-show="show">
</div>
</template>
<script>
Vue.component( 'z-div', {
template: '#imgs',
//父组件向子组件传值
props: [ 'im' ],
data: function ()
{
return {
show: true
}
},
methods: {
change: function ()
{
this.show = !this.show
}
}
} )
var vm = new Vue( {
el: '#app',
data: {
img: [
'img/222_01.jpg',
'img/222_02.jpg',
'img/222_03.jpg',
'img/222_04.jpg',
'img/222_05.jpg',
'img/222_06.jpg',
'img/222_07.jpg',
'img/222_08.jpg',
'img/222_09.jpg',
'img/222_10.jpg',
'img/222_11.jpg',
'img/222_12.jpg',
'img/222_13.jpg',
'img/222_14.jpg',
'img/222_15.jpg',
'img/222_16.jpg',
'img/222_17.jpg',
'img/222_18.jpg',
'img/222_19.jpg',
'img/222_20.jpg',
'img/222_21.jpg',
'img/222_22.jpg',
'img/222_23.jpg',
'img/222_24.jpg',
'img/222_25.jpg'
]
}
} )
</script>
</body>
</html>注：如果想要最初图片不显示，点击显示图片效果的话，将下图位置show的值改为false即可
总结
到此这篇关于vue制作点击切换图片效果的文章就介绍到这了,更多相关vue点击切换图片效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！