Vue 實現(xiàn)從文件中獲取文本信息的方法詳解
更新時間：2019年10月16日 11:36:48 作者：心若向陽無謂悲傷
這篇文章主要介紹了Vue 實現(xiàn)從文件中獲取文本信息的方法,結合實例形式詳細分析了vue.js基于export導出的文件信息讀取相關操作技巧,需要的朋友可以參考下
本文實例講述了Vue 實現(xiàn)從文件中獲取文本信息的方法。分享給大家供大家參考，具體如下：
最近在使用vue做項目的時候，遇到一個需求，界面中需要顯示大量的說明文字，為了保持界面的整潔和趕緊，決定采用單獨的文件來存儲顯示信息，然后通過文件讀取的方式顯示到界面上。
剛開始我使用的是File和FileReader對象獲取，但是比較氣人的是這兩個對象是IE瀏覽器特有的屬性，chrome不支持，而且為了安全起見，現(xiàn)在瀏覽器是不推崇這種做法的，因為很容易造成文件被外部惡意刪除或增加內容，安全性太低。無奈之下，想到了一個既簡單又比較取巧的方法，使用export來實現(xiàn)。
實現(xiàn)的思路：
1.新建一個.js文件，在文件中定義一個常量，并將這個常量通過export導出
2.在要使用這段文字的vue文件中，import這個js文件中的常量，然后直接引用
下面做個簡單示例：
首先，目錄結構如下所示：
2.開發(fā)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程序設計有所幫助。
相關文章
Vue 中使用vue2-highcharts實現(xiàn)top功能的示例
下面小編就為大家分享一篇Vue 中使用vue2-highcharts實現(xiàn)top功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了vue+Element實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue中如何動態(tài)顯示表格內容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue.js?Table?組件自定義列寬實現(xiàn)核心方法
這篇文章主要介紹了vue.js?Table?組件自定義列寬實現(xiàn)核心方法,文圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
?最近需要再頁面里做個倒計時,發(fā)現(xiàn)用clearInterval()清除定時器失效,下面這篇文章主要給大家介紹了關于VUE設置和清除定時器的方式及遇到的問題的相關資料,需要的朋友可以參考下2022-10-10
css文件可以直接引入到main.js中,scss文件如果沒有scss特殊語法也可以直接引入index.js,只有scss文件中的特殊語法全局引入的時候無法顯示,所以需要特殊處理,下面這篇文章主要給大家介紹了關于vue全局引入scss樣式文件的相關資料,需要的朋友可以參考下2022-11-11
關于vue項目vue-cli-service啟動報錯失敗問題的解決方法
前端拉取代碼后,想要運行代碼的時候可以能遇到啟動報錯的問題,這里我們只針對于vue-cli-service報錯項來說,文中通過圖文結合的方式給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue實現(xiàn)動態(tài)按鈕功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
使用vue-video-player實現(xiàn)直播的方式
在開發(fā)期間使用過video.js、mui-player等插件，發(fā)現(xiàn)這些video插件對移動端的兼容性都不友好，最后發(fā)現(xiàn)一個在移動端兼容不錯的插件vue-video-player，下面通過場景分析給大家介紹使用vue-video-player實現(xiàn)直播的方法，感興趣的朋友一起看看吧2022-01-01
vue?openlayers實現(xiàn)臺風軌跡示例詳解
這篇文章主要為大家介紹了vue?openlayers實現(xiàn)臺風軌跡示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11