vue v-cloak 不起作用

問題描述

vue v-cloak 在webpack編譯css后不起作用

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

在css文件中寫入

[v-cloak] {
  display: none;
}

不起作用，原因是項目采用了css編譯，html中的所有的類都是采用 :class="style.className"的形式，css編譯后形成鍵值對的形式，key值是html中的className,value值是key + '-哈希值'

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
tmpl.html:

<div :class="[style.bannerImg, style.bgimg]">
    <span :class="[style.bgimg, style.bannerAnimatioin]"></span>
</div>

style.css

.bgimg{
    position: relative;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.bannerImg {
    height: 5.64rem;
}

組件的js文件中引入html和css文件

import template from './tmpl.html';
let style = require('./style.css');
module.exports.createApp = function () {
    return new Vue({
        template,
        data: {
            style,
        }
    })
}