在vue项目中,如何读取自定义的.txt文件?

8 篇文章 0 订阅

1.不管你是本地.txt文件还是线上.txt文件,打开是文件时文档内容:
提示:若是想要读出文件中的html代码,则需要格式是utf-8d的,若不是utf-8d的格式,解析后会出现乱码情况
在这里插入图片描述
在这里插入图片描述
第二步:可以通过以下函数获取其中内容:

    OpenPup(val){
     let xhr = new XMLHttpRequest()
    //  let okStatus = document.location.protocol === "file:" ? 0 : 200;
    // xhr.open("GET", val.url, false); // 线上链接地址
     xhr.open("GET", "text.txt", false); // public文件夹下的绝对路径
     xhr.overrideMimeType("text/html;charset=utf-8")
     xhr.send(null)
     console.log(xhr.responseText)  // xhr.responseText为文本中的内容
     this.agreementContent = xhr.responseText
     this.agreementShow = true
    },

第三步: 在你需要的地方调用函数,输入如下内容以及展示
在这里插入图片描述

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Vue的内置方法或Vue插件来读取JSON文件。下面是两种常用的方法: 1. 使用Vue的内置方法: 在Vue组件使用`axios`或`fetch`等工具库来发送HTTP请求并获取JSON数据。首先,你需要安装相应的库,例如axios,然后在组件引入并发送请求。以下是一个简单的示例: ```javascript <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { items: [], }; }, mounted() { axios.get('data.json') .then(response => { this.items = response.data; }) .catch(error => { console.error(error); }); }, }; </script> ``` 在上面的示例,我们在组件的`mounted`生命周期钩子发送了一个GET请求,并将返回的JSON数据存储在`items`数组。然后,我们可以在模板使用`v-for`指令来遍历并显示数据。 2. 使用Vue插件: 你可以使用一些Vue插件来简化读取JSON文件的过程,例如`vue-json-csv`。这个插件提供了一个自定义指令,可以直接在模板使用来读取和展示JSON数据。以下是一个示例: ```javascript <template> <div v-json-csv:src="jsonUrl"> <ul> <li v-for="(item, index) in $jsonCSV.data" :key="index">{{ item.name }}</li> </ul> </div> </template> <script> import VueJsonCsv from 'vue-json-csv'; export default { directives: { jsonCsv: VueJsonCsv, }, data() { return { jsonUrl: 'data.json', }; }, }; </script> ``` 在上面的示例,我们使用了`v-json-csv`指令来读取JSON数据,并将数据存储在`$jsonCSV.data`。然后,我们可以在模板使用`v-for`指令来遍历并显示数据。 无论你选择哪种方法,确保在Vue组件正确引入相应的库或插件,并根据你的需求进行相应的配置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值