Vue如何實(shí)現(xiàn)從文件中獲取文本信息

這篇文章主要介紹Vue如何實(shí)現(xiàn)從文件中獲取文本信息，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

具體如下：

最近在使用vue做項(xiàng)目的時候，遇到一個需求，界面中需要顯示大量的說明文字，為了保持界面的整潔和趕緊，決定采用單獨(dú)的文件來存儲顯示信息，然后通過文件讀取的方式顯示到界面上。

剛開始我使用的是File和FileReader對象獲取，但是比較氣人的是這兩個對象是IE瀏覽器特有的屬性，chrome不支持，而且為了安全起見，現(xiàn)在瀏覽器是不推崇這種做法的，因?yàn)楹苋菀自斐晌募煌獠繍阂鈩h除或增加內(nèi)容，安全性太低。無奈之下，想到了一個既簡單又比較取巧的方法，使用export來實(shí)現(xiàn)。

實(shí)現(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)容，我是直接讀取后，在界面插入，因?yàn)槔锩婵赡軜?biāo)題和文字樣式不同，所以采用這種方法比較簡便。

<template>
 <div >
  <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如何實(shí)現(xiàn)從文件中獲取文本信息”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！