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