Vue.js Eğitimi 03-41

v-for

by Bilal AFSAR

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="product in products">{{ product }}</li>
  </ul>

  <hr />

  <ul>
    <li v-for="(product, index) in products">{{ index }} - {{ product }}</li>
  </ul>

  <hr />

  <div v-for="(product, ind) in products">
    <h3> {{ product }} </h3>
    <p> {{ ind }} </p>
  </div>

  <hr />

  <template v-for="(product, i) in products">
		<h3> {{ product }} </h3>
  	<p> {{ i }} </p>
	</template>
</div>

CSS

#app>div {
  border: 1px solid red;
  padding: 5px 10px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    products: ["Monitor", "Klavye", "Askı", "Masa"],
    persons: [
		  { name: "Gökhan", email: "[email protected]" },
      { name: "Felakettin", email: "[email protected]" },
      { name: "Defne", email: "[email protected]" },
      { name: "İflasettin", email: "[email protected]" }
    ]
  }
});