vue通过ajax加载json数据

Posted 2020-10-28 有理想而不理想化

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)"
        }
    ]
}