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