<template>
  <Row type="flex" justify="space-around">
    <!--卡片组件遍历起始-->
    <!--使用v-for循环的时候,需要配合使用:key-->
    <Col :xs="13" :sm="10" :md="10" :lg="7" v-for="bookmark in bookmarks" :key="bookmark">
      <!--如果不使用v-bind,将无法遍历和渲染Card组件-->
      <Card v-bind="bookmark">
        <p slot="title">
          <Icon type="ios-home-outline"></Icon>
          {{bookmark.title}}
        </p>
        <p>
          <Icon type="ios-star-outline"></Icon>
          <!--链接需要使用v-bind:href-->
          <a v-bind:href="bookmark.link1" target="_blank">{{bookmark.subtitle1}}</a>
        </p>
        <br/>
        <p>
          <Icon type="ios-star-outline"></Icon>
          <a v-bind:href="bookmark.link2" target="_blank">{{bookmark.subtitle2}}</a>
        </p>
        <br/>
        <p>
          <Icon type="ios-star-outline"></Icon>
          <a v-bind:href="bookmark.link3" target="_blank">{{bookmark.subtitle3}}</a>
        </p>
        <br/>
        <p>
          <Icon type="ios-star-outline"></Icon>
          <a v-bind:href="bookmark.link4" target="_blank">{{bookmark.subtitle4}}</a>
        </p>
      </Card>
      <br/>
    </Col>
    <!--卡片组件遍历结束-->
  </Row>
</template>

<script>
export default {
  name: 'Home',
  data: function () {
    return {
      'bookmarks': [
        {
          'title': '内容标题',
          'subtitle1': '内容子标题一',
          'link1': 'http://www.baidu.com',
          'subtitle2': '内容子标题二',
          'link2': 'http://www.baidu.com',
          'subtitle3': '内容子标题三',
          'link3': 'http://www.baidu.com',
          'subtitle4': '内容子标题四',
          'link4': 'http://www.baidu.com'
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>