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

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

創(chuàng)新互聯(lián)是專業(yè)的德令哈網(wǎng)站建設(shè)公司，德令哈接單;提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行德令哈網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

為什么要使用Vue

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

具體如下：

最近在使用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)容，我是直接讀取后，在界面插入，因為里面可能標題和文字樣式不同，所以采用這種方法比較簡便。

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

分享文章：Vue如何實現(xiàn)從文件中獲取文本信息
當(dāng)前鏈接：http://muchs.cn/article48/ihsshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站策劃、軟件開發(fā)、App開發(fā)、網(wǎng)站營銷、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)