zoukankan      html  css  js  c++  java
  • vue通过ajax加载json数据

    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)"
            }
        ]
    }
  • 相关阅读:
    迷宫寻宝(自编简单版)
    推荐一个免费翻译接口
    nyoj 82
    poj 3984
    Suffix Tree(后缀树)
    python turtle模块绘图
    python continue语句
    python break语句
    pycharm永久破解激活码
    python while死循环
  • 原文地址:https://www.cnblogs.com/Han39/p/8622650.html
Copyright © 2011-2022 走看看