vue实现引入本地json的方法分析

Vue本地JSON文件的引入与实战

在Vue中引入本地JSON文件，可以非常便捷地获取前端所需的数据。接下来，让我详细为您这个过程。

一、静态引入本地JSON文件

你需要在你的项目中创建一个JSON文件，例如命名为`test.json`。然后，你可以在你的Vue组件中通过import语句引入这个文件。具体操作如下：

```javascript

import data from './test.json';

export default {

data() {

return {

userinform: ''

};

},

mounted() {

this.userinform = data; // 在组件挂载后，将JSON数据赋值给组件的数据属性

}

}

```

这样，你就可以在Vue组件中使用这个JSON文件中的数据了。这是一个非常直观且简单的方法。

二、后台服务器请求json方式

当需要从后台服务器获取JSON数据时，你可以使用Vue的HTTP库（如axios或vue-resource）来发送请求。以下是使用axios的示例：

```javascript

this.$axios.get('url').then(response => {

// 请求成功的回调函数

let data = response.data;

}).catch(error => {

// 请求失败的回调函数

alert('连接失败！');

});

```

在这里，你需要将 `'url'` 替换为你的后台服务器提供的实际URL地址。当请求成功时，你可以从响应中获取数据。当请求失败时，会弹出一个警告提示连接失败。

三、Vuejson展示列表页示例 接下来是一个VueJSON并展示在列表页的实例： ```html ```html `div class="padding"> div id="app"> ol li v-for="site in sites"> {{ site.name }} li ol div script src=" script function getJson(url,func){ $.ajax({ type:'get', url:url, dataType: 'json', success: function(data){ if (data.code==0){ var a = data.data.list;func(a); }else{ alert("接口调用失败"); } }, error: function(data){ alert(JSON.stringify(data)); } }); } $(function(){ var url = " getJson(url,pushDom); }); function pushDom(data){ var vm = new Vue({ el: 'app', data: { sites: data } }) } script ` ` 这个示例展示了如何从一个URL获取JSON数据，并在Vue应用中进行和展示。首先通过AJAX请求获取数据，然后在数据成功返回后，将其传递给Vue实例并更新列表。以上就是Vue中引入和本地JSON文件的基本方法。希望这些内容能帮助你在Vue开发中更好地处理JSON数据。 ``