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


Posted in Javascript onOctober 16, 2019

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

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

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

实现的思路:

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

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

下面做个简单示例:

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

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

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程序设计有所帮助。

Javascript 相关文章推荐
js获取视频时长代码
Apr 10 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
小程序实现多选框功能
Oct 30 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
JS实现图片切换特效
Dec 23 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 #Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
JS使用正则表达式提交页面验证的代码
Oct 16 #Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 #Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 #Javascript
JS回调函数深入理解
Oct 16 #Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 #Javascript
You might like
php中http_build_query 的一个问题
2012/03/25 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
js jquery数组介绍
2012/07/15 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
JsRender实用入门教程
2014/10/31 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
学术会议欢迎词
2014/01/09 职场文书
工作检讨书500字
2014/10/19 职场文书
实习计划书范文
2015/01/16 职场文书
求职简历自我评价范文
2015/03/10 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
2016银行求职自荐信
2016/01/28 职场文书
《学会看病》教学反思
2016/02/17 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
Django REST framework 限流功能的使用
2021/06/24 Python