Kaedah Vue untuk membaca fail tempatan: 1. Dapatkan fail tempatan melalui "fungsi (nama) {...}"; melalui dan ikat nilai dalam "this.iconList" ke kelas "".

Persekitaran pengendalian artikel ini: sistem Windows 7, versi Vue 2.9.6, komputer DELL G3

Bagaimana vue membaca fail tempatan?

Baca fail tempatan dalam vue

Latar Belakang

Semasa proses pembangunan projek, terdapat keperluan untuk menetapkan ikon fon secara dinamik untuk memastikan bahawa ikon adalah Ikon dalam kotak pilihan adalah konsisten dengan perpustakaan ikon projek yang dikeluarkan terakhir.

Idea

Baca fail perpustakaan ikon fon tempatan, dan kemudian lakukan penukaran rentetan yang sepadan, supaya ikon dapat dikekalkan konsisten

Langkah

1 Dapatkan fail setempat

const loadFile = function (name) { // name為文件所在位置
    let xhr = new XMLHttpRequest(),
        okStatus = document.location.protocol === "file:" ? 0 : 200;
    xhr.open('GET', name, false);
    xhr.overrideMimeType("text/html;charset=utf-8");//默認(rèn)為utf-8
    xhr.send(null);
    return xhr.status === okStatus ? xhr.responseText : null;
}
export default loadFile;

2 Importnya ke dalam komponen dan lakukan pemprosesan rentetan yang sepadan

import loadFile from '../assets/js/localFile';

Memproses dan. pemerolehan Data fail yang diperoleh

            // 以.iconfont為節(jié)點分割字符串，只需要.iconfont之后的字符串
                let iconData = loadFile('iconfont/iconfont.css').split('.iconfont')[1];
                // 獲取第一次出現(xiàn)'}'時候的索引值
                let iconLi = iconData.indexOf('}');
                // 得到第一次出現(xiàn)'}'之后的所有字符串信息【這部分就是我們需要的字體圖標(biāo)的信息】
                let liList = iconData.substring(iconLi + 1, iconData.length-1);
                // 分割每個字體圖標(biāo)信息
                let icons = liList.split('.');
                // 設(shè)置分割標(biāo)識
                let flag = ':before';
                // 循環(huán)獲取到的字體圖標(biāo)數(shù)組
                for (let i = 0; i < icons.length; i++) {
                    // 判斷不為空
                    if (icons[i].indexOf(flag) > -1) {
                        // 獲取圖標(biāo)信息中的class部分，也就是:before之前的信息
                        let liList = icons[i].split(flag);
                        // 將class添加到數(shù)組，最后再頁面上進(jìn)行循環(huán)輸出
                        this.iconList.push(liList[0]);
                    }
                }

akhirnya melalui gelung untuk mengikat nilai dalam ini.iconList ke kelas .

Pembelajaran yang disyorkan: "Pilihan tutorial video 5 vue.js terkini"

Atas ialah kandungan terperinci Bagaimana untuk membaca fail tempatan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!