vuejs之v-for

看一个例子:

<html>

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

<body>
  <div id="app">
    <ul>
      <li v-for="(item, index) in arr">
        索引:{{index}},值:{{item}}
      li>
    ul>
    <ul>
      <li v-for="item in arr2">
        {{item.color}}
      li>
    ul>
    <input type="button" @click="add" value="添加颜色">
    <input type="button" @click="remove" value="移除颜色">
  div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        arr: ['mike', 'bob', 'tom', 'jack'],
        arr2: [{ color: 'red' }, { color: 'blue' }, { color: 'yellow' }],
      },
      methods: {
        add: function () {
      //添加一个元素 this.arr2.push({ color: 'black' }); }, remove: function () {
      //移除左边第一个元素 this.arr2.shift(); }, }, })
script> body> html>

效果:

vuejs之v-for_第1张图片

点击添加颜色会在末尾添加一个black,点击删除颜色会删除掉第一个颜色:

vuejs之v-for_第2张图片

说明:

v-for用于根据数据生成列表结构。

数组常和v-for使用。

语法是(item,index) in 数据。item是具体值,index是索引。

item和index可以结合其他指令一起使用。

你可能感兴趣的:(vuejs之v-for)