vant的Collapse 折叠面板和单元格中使用v-for

import Vue from 'vue';

import { Cell, CellGroup,Collapse ,CollapseItem} from 'vant';

<van-collapse v-model="activeNames" icon="arrow" accordion>

        <van-collapse-item title="高中年级组(4)" name="1">

         <van-cell

            :key="index"

            :title="item.title"

            :value="item.grade"

            v-for="(item, index) in items"

          />

      </van-collapse-item>

</van-collapse>

在使用v-for时,必须配合使用v-bind

   export default {

       //组件 Q2组件需要正确注册,才能被页面识别

      components: {

           [Cell.name]: Cell,

           [CellGroup.name]: CellGroup,

           [Collapse .name]: Collapse ,

          [CollapseItem.name]: CollapseItem

      },

     //数据层

     data() {

        return {

             activeNames: [],

             items: [

                  { title: "李红", grade: "高一语文组" },

                  { title: "李名", grade: "高一数学组" },

                  { title: "李光", grade: "高一英语组" },

                  { title: "李严", grade: "高二英语组" },

                  { title: "李章", grade: "高二数学组" }

           ]

        },

        mounted() {},

        methods: {}

     }

};

发布了22 篇原创文章 · 获赞 1 · 访问量 1099
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览