vue交互

最新推荐文章于 2024-04-18 11:10:11 发布

原创最新推荐文章于 2024-04-18 11:10:11 发布 · 450 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-resource.js" ></script>

<style>
.Main{
width: 100%;
height: 150px;
border-bottom: 2px solid #E7E7E7;
}
.Layout_7 .Main div{
width: 1200px;
height: 150px;
margin: 0 auto;

}
.Main div a{
display: block;
width: 1100px;
height: 150px;
margin: 0 auto;
}
.Main div a img{
display: block;
float: left;
width: 180px;
height: 120px;
margin-top: 15px;
}
.Main div a h1{
width: 730px;
text-align: center;
float: left;
margin-left: 20px;
font-size: 18px;
color: #545454;
margin-top: 20px;
}

.Main div a p{
width: 730px;
float: left;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-left: 20px;
font-size: 12px;
color: #868383;
margin-top: 15px;
}

.Main div a span{
float: left;
display: block;
width: 730px;
text-align: right;
margin-left: 20px;
margin-top: 20px;
color: #868383;
font-size: 12px;
}
.Main div a div{
width: 110px;
height: 90px;
border: 1px solid #DEDEDE;
float: right;
margin-top: -60px;
}
.Main div a div p:nth-child(1){
text-align: center;
width: 100%;
margin-left: 0;
font-size: 14px;
color: #393939;
font-family: '方正兰亭仟黑简体' !important;
}

.Main div a div p:nth-child(2){
text-align: center;
width: 100%;
margin-left: 0;
color: #393939;
font-size: 20px;
margin-top: 10px;
font-family: '方正兰亭黑' !important;
}
.Main div a:hover{
margin-left: 40px;
}
.Main:hover {
background: #F5F5F5 !important;
}
.Dj{
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #e5e5e5;
margin: 0 auto;
cursor: pointer;
}
</style>

</head>
<body>
<div id="app">
<div class="Main" v-for='value in myData'>
<div>
<a href="#">
<img :src='value.url'/>
<h1>{{value.h1}}</h1>
<p>{{value.p}}</p>
</a>
</div>
</div>

<div class="Dj" @click='Get'>点一下喊爸爸</div>
</div>


<script>
new Vue({
el:'#app',
data:{
myData:[]
},
methods:{

},
created(){
this.
$http
.get('js/new_file.json').then(function(res){
this.myData = res.data.splice(0,res.data.length)
},function(res){
alert('未获取到接口')
})
}
})
</script>

</body>
</html>