Vue 實現(xiàn)從文件中獲取文本信息的方法詳解
本文實例講述了Vue 實現(xiàn)從文件中獲取文本信息的方法。分享給大家供大家參考，具體如下：
最近在使用vue做項目的時候，遇到一個需求，界面中需要顯示大量的說明文字，為了保持界面的整潔和趕緊，決定采用單獨的文件來存儲顯示信息，然后通過文件讀取的方式顯示到界面上。
剛開始我使用的是File和FileReader對象獲取，但是比較氣人的是這兩個對象是IE瀏覽器特有的屬性，chrome不支持，而且為了安全起見，現(xiàn)在瀏覽器是不推崇這種做法的，因為很容易造成文件被外部惡意刪除或增加內(nèi)容，安全性太低。無奈之下，想到了一個既簡單又比較取巧的方法，使用export來實現(xiàn)。
實現(xiàn)的思路：
1.新建一個.js文件，在文件中定義一個常量，并將這個常量通過export導(dǎo)出
2.在要使用這段文字的vue文件中，import這個js文件中的常量，然后直接引用
下面做個簡單示例：
首先，目錄結(jié)構(gòu)如下所示：
2.開發(fā)airStruction.js內(nèi)容
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;\'>'+
內(nèi)容內(nèi)容內(nèi)容
'</div>'+
}
3.在vue文件中引用這個js文件中的內(nèi)容，我是直接讀取后，在界面插入，因為里面可能標(biāo)題和文字樣式不同，所以采用這種方法比較簡便。
<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程序設(shè)計有所幫助。
相關(guān)文章
Vite?構(gòu)建環(huán)境分為開發(fā)環(huán)境和生產(chǎn)環(huán)境,不同環(huán)境會有不同的構(gòu)建策略,本文就來介紹下Vite 配置文件,具有一定的參考價值,感興趣的可以了解一下2024-08-08
本文將深入探討計算屬性未生效的常見原因,并提供排查和解決方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
Vue.2.0.5實現(xiàn)Class 與 Style 綁定的實例
本篇文章主要介紹了Vue.2.0.5實現(xiàn)Class 與 Style 綁定的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Electron主進(jìn)程(Main?Process)與渲染進(jìn)程(Renderer?Process)通信詳解
這篇文章主要介紹了Electron主進(jìn)程(Main?Process)與渲染進(jìn)程(Renderer?Process)通信,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3視頻播放器組件Vue3-video-play新手入門教程
這篇文章主要給大家介紹了關(guān)于Vue3視頻播放器組件Vue3-video-play新手入門教程的相關(guān)資料,本文實例為大家分享了vue-video-player視頻播放器的使用配置,供大家參考,需要的朋友可以參考下2023-12-12
Vue拖拽組件列表實現(xiàn)動態(tài)頁面配置功能
這篇文章主要介紹了Vue拖拽組件列表實現(xiàn)動態(tài)頁面配置功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
在運行Vue項目時遇到npm安裝錯誤可使用命令npminstall--legacy-peer-deps解決,若VsCode中無法運行npm命令,則可能是IDE配置未生效,可嘗試重啟電腦或使用cmd命令行直接在項目目錄下運行2024-10-10
Vite中使用Ant?Design?Vue3.x框架教程示例
這篇文章主要為大家介紹了Vite中使用Ant?Design?Vue3.x框架教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
本文主要介紹了vue拖拽改變寬度的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
詳解如何使用router-link對象方式傳遞參數(shù)？
這篇文章主要介紹了如何使用router-link對象方式傳遞參數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05