HTML
<ul id="Hanapp"> <li class="styVue" v-for="item in actList"> <a class="img_li" :href="item.href"></a> <img :src="item.img" alt="" /> <span class="spanSty">{{item.name}} </span> </li> </ul>
js
<script type="text/javascript"> var app1111 = new Vue({ el:"#Hanapp", data:{ // actList:[ // {name:‘1‘}, // {name:‘2‘}, // {name:‘3‘}, // {name:‘4‘}, // {name:‘5‘}, // {name:‘6‘}, // {name:‘7‘} // ], actList:[], }, created:function(){ this.recommend(); //加载事件 }, methods:{ recommend:function(){ // $.getJSON(‘js/vueJson.json‘,function(data){ // console.log(data) // }) var vm=this; $.ajax({ type:"get", url:"js/vueJson.json", async:true, success:function(data){ vm.actList=vm.actList.concat(data.msg); } }); } } }); </script>
vueJson.json
{ "msg": [ { "name": "范冰冰", "img":"./img/payback.png", "href":"javascript:void(0)" }, { "name": "林志颖", "img":"./img/lishi.png", "href":"javascript:void(0)" }, { "name": "Facebook", "img":"./img/shejiao.png", "href":"javascript:void(0)" } ] }
原文地址:https://www.cnblogs.com/Han39/p/8622650.html
时间: 2024-11-09 00:33:40