changes
This commit is contained in:
Code12121
parent
5ad013fe9e
commit
e97f1a203b
|
|
@ -5,7 +5,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="../css/css/font-awesome.min.css">
|
<link rel="stylesheet" href="../../../Fontawesome/css/font-awesome.min.css">
|
||||||
<style>
|
<style>
|
||||||
*{
|
*{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -26,33 +26,31 @@
|
||||||
i[class="fa fa-th"]{
|
i[class="fa fa-th"]{
|
||||||
margin-right: 15 px;
|
margin-right: 15 px;
|
||||||
}
|
}
|
||||||
.item{
|
.li{
|
||||||
border: 1px solid #00f;
|
|
||||||
}
|
|
||||||
li{
|
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
|
||||||
li>div{
|
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
.span{
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
img{
|
img{
|
||||||
height:100px;
|
height:100px;
|
||||||
}
|
}
|
||||||
|
.active{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<i class="fa fa-list"></i>
|
<i class="fa fa-list" @click="DecideListStyle" ></i>
|
||||||
<i class="fa fa-th"></i>
|
<i class="fa fa-th" @click="DecideListStyle"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="li">
|
<div class="li" v-for="item in list">
|
||||||
<div>
|
<img :src="item.img" >
|
||||||
<img src="../img/logo.png">
|
<div class="span">{{item.content}}</div>
|
||||||
<div class="span"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -62,13 +60,25 @@
|
||||||
const vue=new Vue({
|
const vue=new Vue({
|
||||||
el:"#app",
|
el:"#app",
|
||||||
data:{
|
data:{
|
||||||
|
list:[
|
||||||
},
|
{id:1,img: "../img/logo.png" ,content:"列表1"},
|
||||||
computed:{
|
{ 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" },
|
||||||
|
],
|
||||||
|
isChanges:false
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
DecideListStyle(val){
|
||||||
|
console.log(val.target);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 434 KiB After Width: | Height: | Size: 434 KiB |
Loading…
Reference in New Issue