Using v-for with a Range

Demonstrate rendering a range of numbers in a list with v-for, which is a simple loop of iterations.

<template>
  <div>
    <!-- Use v-for to render a list of numbers from 1 through 10 -->
    <ul>
      <li v-for="number in 10" :key="number">{{ number }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // No data or methods needed for this example
};
</script>

This Vue component template uses the v-for directive to create a list (ul) of list items (li) with numbers ranging from 1 to 10. The v-for directive iterates over the numbers, and each iteration's current item is bound to the variable 'number'. The ':key' attribute is used to provide a unique key for each element in the loop, which is a recommended practice for list rendering in Vue.js to optimize DOM updating.