Как выводить сцепленный текст с помощью JavaScript, HTML и Vue
Попробуйте выяснить, как вывести сцепленный текст из этого кода javascript. Скрипт рисует четверть круга, пропорционального размеру бара, и отображает значение Пи в трех десятичных знаках.
Скрипт должен отображать "количество баров =" + numberOfBars. Я потратил некоторое время на изучение того, как это сделать. Мне было интересно, каков наилучший подход.
Вот код до сих пор.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div style="clear: left">
<div
v-for="(y, i) in bars()"
:key="i"
:style="{ width: scale, height: numberOfBars * scale, float: 'left', borderTop: (y * scale) + 'px solid blue' }"
>
</div>
PI = {{ bars().reduce((a, b) => Math.PI.toFixed(3) /* TODO: replace "10" with correct expression */, 0) }}
</div>
</div>
<script>
const app = new Vue({
el: '#app',
methods: {
bars () {
const bars = []
for (let i = 0; i < this.numberOfBars; i++) {
bars.push(Math.sqrt(this.numberOfBars * this.numberOfBars - i * i))
}
return bars
},
},
data () {
return {
scale: 2,
numberOfBars: 30,
}
},
})
</script>
</body>
</html>
Что мне нужно добавить,чтобы получить следующий результат? Код уже отображает четверть круга и значение пирога в веб-браузере. Последний шаг-вывести на экран " количество баров = 30."
Ответы - Как выводить сцепленный текст с помощью JavaScript, HTML и Vue / How to output concatenated text with JavaScript, HTML, and Vue
31.10.2020 12:52:06
Уходя от вашего примера изображения, вы хотите этого:
const app = new Vue({
el: '#app',
methods: {
bars() {
const bars = []
for (let i = 0; i < this.numberOfBars; i++) {
bars.push(Math.sqrt(this.numberOfBars * this.numberOfBars - i * i))
}
return bars
},
},
data() {
return {
scale: 2,
numberOfBars: 30,
}
},
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div style="clear: left">
<div v-for="(y, i) in bars()" :key="i" :style="{ width: scale + 'px', height: numberOfBars * scale + 'px', float: 'left', borderTop: (y * scale) + 'px solid blue' }">
</div>
Number of bars = {{ numberOfBars }}
<br>
PI = {{ bars().reduce((a, b) => Math.PI.toFixed(3) /* TODO: replace "10" with correct expression */, 0) }}
</div>
</div>Хотя все, что я добавил, Было Number of bars = {{ numberOfBars }}.
Я также добавил '+ px' к вашим стилям ширины/высоты, так как в противном случае фрагмент не работает.