当前位置: 首页 > 编程笔记 >

Vue 实现从文件中获取文本信息的方法详解

狄法
2023-03-14
本文向大家介绍Vue 实现从文件中获取文本信息的方法详解,包括了Vue 实现从文件中获取文本信息的方法详解的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了Vue 实现从文件中获取文本信息的方法。分享给大家供大家参考,具体如下:

最近在使用vue做项目的时候,遇到一个需求,界面中需要显示大量的说明文字,为了保持界面的整洁和赶紧,决定采用单独的文件来存储显示信息,然后通过文件读取的方式显示到界面上。

刚开始我使用的是File和FileReader对象获取,但是比较气人的是这两个对象是IE浏览器特有的属性,chrome不支持,而且为了安全起见,现在浏览器是不推崇这种做法的,因为很容易造成文件被外部恶意删除或增加内容,安全性太低。无奈之下,想到了一个既简单又比较取巧的方法,使用export来实现。

实现的思路:

1.新建一个.js文件,在文件中定义一个常量,并将这个常量通过export导出

2.在要使用这段文字的vue文件中,import这个js文件中的常量,然后直接引用

下面做个简单示例:

首先,目录结构如下所示:

2.开发airStruction.js内容

export const struction={
 Title:'<p style=\'font-size:18px;color:#333333;\'>哈哈哈哈哈</p>',
 Content:'<p style=\'font-size:18px;color:#333333;margin-top: 10px;\' id="airinstruction">安装说明</p>\n' +
  '<div style=\'font-size: 14px;color: #999999;line-height: 25px;\'>'+
  内容内容内容
  '</div>'+
}

3.在vue文件中引用这个js文件中的内容,我是直接读取后,在界面插入,因为里面可能标题和文字样式不同,所以采用这种方法比较简便。

<template>
 <div style="width:100%;height:100%;">
  <div class="struction_style" v-html="struction">
  </div>
 </div>
</template>
<script>
 import {struction} from '../struction/airStruction'
 var self;
 export default {
  name: "InstructionPage",
  data() {
   return {
    struction:struction.Title+struction.Content
   }
  }
 }
</script>
<style scoped>
</style>

这样完美的解决问题,同时也保证了代码的整洁性,修改起来也很方便,给大家做个参考。

希望本文所述对大家vue.js程序设计有所帮助。

 类似资料:
  • 问题内容: 我要获取exe / dll / sys文件的“文件描述”和“版权”,如右键单击文件并选择属性时,在“详细信息”选项卡中所示。 问题答案: 使用Windows API,您可以调用VerQueryValue以获取该信息。JNA有一个用于访问此API的类,称为Version。 这另一个问题有一些代码示例可以帮助您入门: 获取.exe的版本信息 这是一个读取产品名称的C代码示例,您可以将其转换

  • 对于任何给定的问题,很可能已经有人把答案写在某个地方了。以电子形式提供的自然语言文本的数量真的惊人,并且与日俱增。然而,自然语言的复杂性使访问这些文本中的信息非常困难。NLP目前的技术水平仍然有很长的路要走才能够从不受限制的文本对意义建立通用的表示。如果我们不是集中我们的精力在问题或“实体关系”的有限集合,例如:“不同的设施位于何处”或“谁被什么公司雇用”上,我们就能取得重大进展。本章的目的是要回

  • 本文向大家介绍Python3读取zip文件信息的方法,包括了Python3读取zip文件信息的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Python3读取zip文件信息的方法。分享给大家供大家参考。具体实现方法如下: 该程序接受一个字符串,其内容是一个zip文件,需要读取这个zip文件中的信息  希望本文所述对大家的Python3程序设计有所帮助。

  • 本文向大家介绍Android中通过MediaStore获取音乐文件信息方法,包括了Android中通过MediaStore获取音乐文件信息方法的使用技巧和注意事项,需要的朋友参考一下 Android系统提供了MediaScanner,MediaProvider,MediaStore等接口,并且提供了一套数据库表格,通过Content Provider的方式提供给用户。当手机开机或者有SD卡插拔等事

  • 本文向大家介绍详解vue中使用express+fetch获取本地json文件,包括了详解vue中使用express+fetch获取本地json文件的使用技巧和注意事项,需要的朋友参考一下 自己在做个vue小demo的时候,想模拟从服务器获取json数据的过程,一开始的想法是使用fetch直接获取本地的json文件,无论是install了json-loader还是把json文件放在index.htm

  • 本文向大家介绍php获取图片信息的方法详解,包括了php获取图片信息的方法详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了php获取图片信息的方法。分享给大家供大家参考,具体如下: getimagesize() 函数将测定任何 GIF,JPG,PNG,SWF,SWC,PSD,TIFF,BMP,IFF,JP2,JPX,JB2,JPC,XBM 或 WBMP 图像文件的大小并返回图像的尺寸以