testzm0476
/
vue222
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

练习图片切换

This commit is contained in:
Code12121 2022-10-31 15:04:55 +08:00
parent e97f1a203b
commit 804d64b2e2
1 changed files with 69 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
08-综合练习/图片样式切换/index/index.html
View File

@ -36,21 +36,51 @@
img{
height:100px;
}
.active{
color: #fff;
[v-cloak]{
display: none;
}
.list{
width: 30%;
display: inline-block;
margin: 10px 20px;
}
.img_src{
width: 100px;
height: 100px;
padding:0 38%;
padding-bottom: 0px;
}
.img_span{
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="title">
<i class="fa fa-list" @click="DecideListStyle" ></i>
<i class="fa fa-th" @click="DecideListStyle"></i>
<div id="app" v-cloak>
<div v-if="isGet">
<div class="title">
<i class="fa fa-list" @click="Clickme($event)" :style="ChangeList()"></i>
<i class="fa fa-th" @click="Clickme($event)" :style="Changeth()"></i>
</div>
<div>
<div class="li" v-for="item in list">
<img :src="item.img">
<div class="span">{{item.content}}</div>
</div>
</div>
</div>
<div class="item">
<div class="li" v-for="item in list">
<img :src="item.img" >
<div class="span">{{item.content}}</div>
<div v-else>
<div class="title">
<i class="fa fa-list" @click="Clickme($event)" :style="ChangeList()"></i>
<i class="fa fa-th" @click="Clickme($event)" :style="Changeth()"></i>
</div>
<div>
<div class="ul">
<div class="list" v-for="item in list">
<img src="../img/logo.png" class="img_src">
<div class="span img_span">{{item.content}}</div>
</div>
</div>
</div>
</div>
</div>
@ -62,23 +92,38 @@
data:{
list:[
{id:1,img: "../img/logo.png" ,content:"列表1"},
{ id: 1, img: "../img/logo.png", content: "列表2" },
{ id: 2, img: "../img/logo.png", content: "列表3" },
{ id: 3, img: "../img/logo.png", content: "列表4" },
{ id: 4, img: "../img/logo.png", content: "列表5" },
{ id: 5, img: "../img/logo.png", content: "列表6" },
{ id: 6, img: "../img/logo.png", content: "列表7" },
{ id: 7, img: "../img/logo.png", content: "列表8" },
{ id: 8, img: "../img/logo.png", content: "列表9" },
{ id: 9, img: "../img/logo.png", content: "列表10" },
{ id: 10, img: "../img/logo.png", content: "列表11" },
{ id: 2, img: "../img/logo.png", content: "列表2" },
{ id: 3, img: "../img/logo.png", content: "列表3" },
{ id: 4, img: "../img/logo.png", content: "列表4" },
{ id: 5, img: "../img/logo.png", content: "列表5" },
{ id: 6, img: "../img/logo.png", content: "列表6" },
{ id: 7, img: "../img/logo.png", content: "列表7" },
{ id: 8, img: "../img/logo.png", content: "列表8" },
{ id: 9, img: "../img/logo.png", content: "列表9" },
{ id: 10, img: "../img/logo.png", content: "列表10" },
{ id: 11, img: "../img/logo.png", content: "列表11" },
{ id: 12, img: "../img/logo.png", content: "列表12" },
],
isChanges:false
isColor:"#fff",
isTip:"",
isGet:true
},
methods: {
DecideListStyle(val){
console.log(val.target);
}
Clickme(event){
this.isTip=event.target.className
},
ChangeList(){
if(this.isTip=="fa fa-list"){
this.isGet=true
return {color:this.isColor}
}
},
Changeth() {
if (this.isTip == "fa fa-th") {
this.isGet=false
return { color: this.isColor }
}
}
},
})
</script>