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

原文地址:https://www.cnblogs.com/Han39/p/8622650.html

时间: 2024-11-09 00:33:40

vue通过ajax加载json数据的相关文章

JQuery跨域加载JSON数据或HTML。

前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $.ajax({ type: "get", async: false, url: "http://localhost:13964/getpage.ashx?callback=?",//服务端URL,该URL返回一段JS数据.如需返回HTML,只需把HTML组织成JSON即可

Ajax加载json与序列化

json其实是JavaScript对象表示法,数据可以使用json来表示.它看起来非常像对象字面量语法,但它并不是对象. 当json在服务和web浏览器之间传输的时候是以字符串形式来传送的,在将json对象转换成json字符串发送给服务器叫做序列化,在接受服务器发送过来的json字符串并且将其转换成json对象叫做反序列化. 在JavaScript中有两种转换成json的方法: 第一 eval()方法 var json = '[ { "name" : "卫庄", &

hive加载json数据解决方案

hive官方并不支持json格式的数据加载,默认支持csv格式文件加载,如何在不依赖外部jar包的情况下实现json数据格式解析,本编博客着重介绍此问题解决方案 首先创建元数据表: create EXTERNAL table access_log (content string) row format delimited fields terminated by '\t' STORED AS INPUTFORMAT 'com.hadoop.mapred.DeprecatedLzoTextInpu

Echarts ajax动态加载json数据

后台php写的,给前台准备好json格式数据 public function actionGetOffline(){ $userid = Yii::$app->user->identity->user_id; $connection = Yii::$app->db; $command = $connection->createCommand("SELECT proc_phase_id from tb_pro where user_id like '%$userid%

dojo 加载Json数据

1.今天研究了dojo datagrid加载WebService后台传上来的数据.研究来研究去发现他不是很难.用谷歌多调试一下就好了. 2.看很多例子,这个例子能够更好的帮我解决问题:https://dojotoolkit.org/documentation/tutorials/1.10/dojo_data/index.html 往下滑动页面会看到类似于下面例子的截图: 3.框架都好说,把字段对应上问题不大,主要是数据.我开始是直接将WebService传出来的JSON数据传入给Memory的d

MVC4中EasyUI Tree异步加载JSON数据生成树

  1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summary> // [DataContract] [Serializable] public class EasyTreeData { /// <summary> /// ID /// </summary> //  [DataMember] public string id { get;

ajax 加载不同数据

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> function fn1 (data) { var oul1 = document.getElementById('ul1'); var html = ''; for(var i = 0; i < data.length; i++)

Ext.tree.panel 后端动态加载json数据

首先建一个bean类,如: package ***.bean; import java.io.Serializable;import java.util.List; public class Menu implements Serializable { private static final long serialVersionUID = 1L; private String id; private String parentId;//设置父id和子id用来拼接children,设成字符串有利

EasyUI combobox 加载JSON数据《一》

Action返回 JSON 格式如下: jsonResult = { total=7,rows=[ {TEXT=技术支持, ID=402894ca4419acf1014419b148a10000}, {TEXT=开发部, ID=402894ca4419acf1014419beb1bc0001}, {TEXT=实施, ID=4028e439476b55be01477bbf0fab0000}, {TEXT=技术支持, ID=4028e439476b55be01477bbfb80e0001}, {TE