При быстром обновлении страницы, какой то глюк, виднеется {{ шаблонные строки }}, как это можно исправить?
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()">⇽</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>