vue.js與ajax

js:

<script type="text/javascript">
var v=new Vue({
el:"#main",
data:{
comm:"",
},
methods:{
recommend:function(){
$.ajax({
type: "get",
url: "index.json",
dataType: "json",
success: function(data) {
v.comm =data.msg;
},
});
}
}
});
v.recommend(); //加載事件
})
</script>

 

html:

<div class="com_con">
<a class="img_div"v-for="x in comm" v-bind:href="x.href">
<div>
<img v-bind:src="x.img" />
</div>
<span class="span_comm">{{x.Name}}</span>
</a>
</div>  //循環的是a標簽 外層循環也能使用循環的值  屬性值綁定用v-bind

 

json:

{
"msg": [
{
"Name": "菜鳥教程",
"img":"img/comm.jpg",
"href":"javascript:void(0)"
},
{
"Name": "Google",
"img":"img/comm.jpg",
"href":"javascript:void(0)"
},
{
"Name": "Facebook",
"img":"img/comm.jpg",
"href":"javascript:void(0)"
}
]
}