Как не видеть {{переменная}} при загрузке страницы сайта vue?

Question

[Юра Комаров]

Всем привет.
На странице vue подключен с помощью inline-template и при загрузки страницы я всегда вижу фигурные скобки для переменной пока vue не отработает и не заменит их но то что у нее вшито в компонент.
Пробовал бороться с этим добавляя класс с display none но, что то не очень успешно выходит.
Подскажите кто, как с этим борется .
Всем заранее спасибо

Answer 1

[Степан Крапивин]

можешь попробовать сделать хитрым способом

в html задай атрибут v-cloak тегам, внути которых "скобки" {{

<div v-cloak>
  {{ someData }}
</div>

а в стилях пропиши это:

[v-cloak] {
    display: none;
}

когда Vue загрузится и подхватит вёрстку, он уберёт v-cloak, и стиль display:none автоматически уберётся

Comments

[Ярослав Иванов]

От чего же это хитрый способ?) этот способ в документации как раз для таких целей и прописан.

[Степан Крапивин]

Ярослав Иванов, для человека умеющего читать доки, наверное, вообще никаких хитростей не бывает.

[Ярослав Иванов]

Степан Крапивин, ну для меня хитрый прием это не только, который не описан в документации но и не подразумевался конструкцией. К примеру в css убрать "обтекание" float через "clear-fix".

Answer 2

[Алексей Ярков]

Гуглить v-cloak

Comments

[sharpsss]

Не подскажите пожалуйста а почему v-cloak ? Почему просто не подключить vue в теге head, тогда сразу отрендерит значения без перерисовки выражений