vuejs之v-for

发布时间：2020-12-16 23:02:47 所属栏目：百科来源：网络整理

导读：看一个例子： html head script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" / script / body div id ="app" ul li v-for ="(item,index) in arr" 索引：{{index}}，值：{{item}} li ="item in arr2" {{item.color}} input type ="button" @click

看一个例子：

<html>

head>
  script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</bodydiv id="app">
    ul>
      li v-for="(item,index) in arr">
        索引：{{index}}，值：{{item}}
      li="item in arr2"
        {{item.color}}
      input type="button" @click="add" value="添加颜色"="remove"="移除颜色"div
    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();
        },})
  >

效果：

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

说明：

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

数组常和v-for使用。

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!