Как выводить сцепленный текст с помощью JavaScript, HTML и Vue


Как выводить сцепленный текст с помощью JavaScript, HTML и Vue

31.10.2020 12:06:10 Просмотров 40 Источник

Попробуйте выяснить, как вывести сцепленный текст из этого кода 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."

enter image description here

У вопроса есть решение - Посмотреть?

Ответы - Как выводить сцепленный текст с помощью JavaScript, HTML и Vue / How to output concatenated text with JavaScript, HTML, and Vue

Является ответом!
Daniel_Knights

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' к вашим стилям ширины/высоты, так как в противном случае фрагмент не работает.

Помочь в развитии проекта:
Закрыть X