思路
創(chuàng)建一個數(shù)組，數(shù)組里面放入圖片，利用props（父組件向子組件傳值），v-for（循環(huán)），v-bind（綁定屬性）將圖片傳入HTML定義的div中。文章來源地址http://www.zghlxwxcb.cn/news/detail-738119.html
Ⅰ.在頭部導(dǎo)入vue文件（導(dǎo)入前提是vue文件已被引入js中）
<script src="js/vue.js"></script>Ⅱ.在HTML中創(chuàng)建一個z-div（可根據(jù)自己喜好命名），用來接收組件的傳值，用v-for使數(shù)組元素遍歷循環(huán)以此顯示圖片，v-bind綁定im（im定義在script標(biāo)簽中的全局組件中），變量i傳入im中。
<div id="app">
<z-div v-for="i in img" :im="i"></z-div>
</div>Ⅲ.定義一個組件<template>,里面寫入需要傳給z-div的數(shù)據(jù)，用v-bind綁定src元素，接受組件的傳值。
<template id="imgs">
<div id="box" @click="change">
<img :src="im" alt="" v-show="show">
</div>
</template>Ⅳ.在script標(biāo)簽里面定義一個全局組件（全局組件要在創(chuàng)建Vue實例之前注冊），并使用props屬性定義一個im（數(shù)組中的im是變量通過屬性綁定，綁定到子組件身上）。
Vue.component( 'z-div', {
template: '#imgs',
props: [ 'im' ],
data: function ()
{
return {
show: true
}
},
methods: {
change: function ()
{
this.show = !this.show
}
}
} )Ⅴ.定義一個新的Vue，并在里面定義一個數(shù)組，里面放入我們需要的圖片。
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定義循環(huán)，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即可
文章來源：http://www.zghlxwxcb.cn/news/detail-738119.html
到了這里，關(guān)于vue制作點擊切換圖片效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
