vue交互

<!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:{
Get:function(){
this.
$http
.get('js/new_file.json').then(function(res){
this.myData = res.data.splice(0,res.data.length)
},function(red){
alert('未获取到接口')
})
}

}
})
</script>-->
<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值