javascript – 如何在vue.js应用程序中访问外部json文件对象

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 如何在vue.js应用程序中访问外部json文件对象，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含870字，纯文字阅读大概需要2分钟。

内容图文

如何访问vue.js应用程序中的JSON对象我是新手

import json from './json/data.json'

加载JSON文件,现在我必须访问其中的对象

解决方法:

只需将导入分配给数据属性即可

<script>
      import json from './json/data.json'
      export default{
          data(){
              return{
                  myJson: json
              }
          }
      }
</script>

然后使用v-for遍历模板中的myJson属性

<template>
    <div>
        <div v-for="data in myJson">{{data}}</div>
    </div>
</template>

注意

如果要导入的对象是静态的,即不会更改,则将其分配给数据属性是没有意义的,因为它不需要被动.

Vue将data选项中的所有属性转换为getter / setter,以使属性具有反应性.因此,为不会改变的数据设置getter / setter是不必要的和开销.见Reactivity in depth.

因此,您可以创建自定义选项,如下所示：

<script>
          import MY_JSON from './json/data.json'
          export default{
              //custom option named myJson
                 myJson: MY_JSON
          }
    </script>

然后使用$options遍历模板中的自定义选项：

<template>
        <div>
            <div v-for="data in $options.myJson">{{data}}</div>
        </div>
    </template>

内容总结

以上是互联网集市为您收集整理的javascript – 如何在vue.js应用程序中访问外部json文件对象全部内容，希望文章能够帮你解决javascript – 如何在vue.js应用程序中访问外部json文件对象所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---