0

При быстром обновлении страницы, какой то глюк, виднеется {{ шаблонные строки }}, как это можно исправить?

Vue.createApp({
   data() {
      return {
         item: ['-', 9, 8, 7, '+', 6, 5, 4, '.', 3, 2, 1, 0, '*', '/',],
         displayValue: '',
      }
   },
   methods: {
      buttonShow(num) {
         this.displayValue += num;
      },
      clear() {
         this.displayValue = '';
      },
      calc() {
         if (eval(this.displayValue) < 1) {
            this.displayValue = eval(this.displayValue).toFixed(1);
         } else {
            this.displayValue = eval(this.displayValue);
         }
      },
      back() {
         if (this.displayValue) {
            this.displayValue = this.displayValue.substring(0, this.displayValue.length - 1);
         }
      },
      percent() {
         this.displayValue = this.displayValue / 100
      }
   }
}).mount('#app');
.grid{ 
   max-width: 360px;
   margin: 50px auto;
   padding: 20px;
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(4, 1fr);
   background-color: #233244;
   user-select: none;

}

.item {
   padding: 15px;
   border: none;
   color: white;
   font-size: 28px;
   background-color: #31455e;
   cursor: pointer;
   transition: .3s ease-in;
}

.item:hover{
   transform: scale(1.05);
   background-color: turquoise;
}

.input {
   background-color: #31455e;
   grid-column: 1/-1;
   height: 50px;
   outline: none;
   text-align: right;
   padding-right: 10px;
   font-size: 28px;
   color: white;
}

.equally{
   grid-column: 4/-1;
   grid-row: 5/7;
}
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>


   <div id='app'>
      <div class="grid">
         <input class="input" type="text" readonly v-bind:value="displayValue">
         <button class="item" @click="clear()">C</button>
         <button class="item back" @click="back()">&loarr;</button>
         <button class="item" @click="percent()">%</button>
         <button class="item" v-for="i of item" @click="buttonShow(i)">{{i}}</button>
         <button class="item equally" @click="calc()">=</button>
      </div>
   </div>




   <script src="https://unpkg.com/vue@next"></script>
   <script src="main.js"></script>
</body>

</html>

введите сюда описание изображения

1 ответ 1

1
  1. В разметке/шаблоне добавить директиву v-cloak тегу корневого элемента (на который производится монтирование App):
<div id="app" v-cloak>
  ...
</div>
  1. В стили добавить правило скрытия (желательно первым <style> в <head>, чтобы оно применялось сразу):
[v-cloak] { visibility: hidden !important; }

Как это работает: данная директива присутствует как атрибут (и стилевое правило применяется, скрывая элемент), до момента готовности веб-приложения - а когда библиотека Vue закончит подготовку и монтирование компонентов, она автоматически удалит этот атрибут, и элемент начинает отображаться.

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.