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

作业练习：图片样式切换

This commit is contained in:
Code12121 2022-10-31 15:18:40 +08:00
parent 804d64b2e2
commit 4ae3ea6ce5
3 changed files with 98 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
08-综合练习/图片样式切换/css/css.css Normal file
View File

@ -0,0 +1,57 @@
* {
margin: 0;
padding: 0;
}
#app {
width: 98%;
margin: 0 auto;
}
.title {
line-height: 50px;
background-color: bisque;
text-align: right;
}
i {
margin: 0 10px 0;
}
i[class="fa fa-th"] {
margin-right: 15 px;
}
.li {
margin: 10px 0;
display: flex;
}
.span {
align-self: center;
}
img {
height: 100px;
}
[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;
}

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

@ -6,54 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../../Fontawesome/css/font-awesome.min.css">
<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 98%;
margin: 0 auto;
}
.title{
line-height: 50px;
background-color: bisque;
text-align: right;
}
i{
margin: 0 10px 0;
}
i[class="fa fa-th"]{
margin-right: 15 px;
}
.li{
margin: 10px 0;
display: flex;
}
.span{
align-self: center;
}
img{
height:100px;
}
[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>
<link rel="stylesheet" href="../css/css.css">
</head>
<body>
<div id="app" v-cloak>
@ -86,45 +39,5 @@
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue=new Vue({
el:"#app",
data:{
list:[
{id:1,img: "../img/logo.png" ,content:"列表1"},
{ 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" },
],
isColor:"#fff",
isTip:"",
isGet:true
},
methods: {
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>
<script src="../js/index.js"></script>
</html>

39
08-综合练习/图片样式切换/js/index.js Normal file
View File

@ -0,0 +1,39 @@
const vue = new Vue({
el: "#app",
data: {
list: [
{ id: 1, img: "../img/logo.png", content: "列表1" },
{ 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" },
],
isColor: "#fff",
isTip: "",
isGet: true
},
methods: {
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 }
}
}
},
})