Conditional Rendering in Lists with v-if

Provide a code example of using v-if inside a v-for loop to conditionally render items in a list.

<template>
  <ul>
    <li v-for="item in items" :key="item.id" v-if="item.isVisible">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', isVisible: true },
        { id: 2, name: 'Item 2', isVisible: false },
        { id: 3, name: 'Item 3', isVisible: true }
        // ... other items
      ]
    };
  }
};
</script>

This Vue component template renders a list of items using v-for. The v-if directive is used to conditionally render each item based on the item's 'isVisible' property. Only items with 'isVisible' set to true will be rendered in the DOM.