使用Vue.js遍历json并展示数据

场景：

假设我们想要设计一个如下图所示的网站

这里有若干卡片组件，每一个卡片组件中包含一些链接。

如果我们把每个卡片组件都手写出来的话，工程量很大，并且不方便后期增加卡片。

所以一个比较好的解决方案就是把数据封装封一段json，我们只需要手写一个卡片组件，之后用过Vue.js的v-for自己遍历json，并生成卡片组件。

代码样例

这里我们不呈现完整的项目结构，只拿来一个vue组件做示例。

本代码样例的UI框架使用的是iview。

<template>
  <Row type="flex" justify="space-around">
    
    
    <Col :xs="13" :sm="10" :md="10" :lg="7" v-for="bookmark in bookmarks" :key="bookmark">
      
      <Card v-bind="bookmark">
        <p slot="title">
          <Icon type="ios-home-outline">Icon>
          {{bookmark.title}}
        p>
        <p>
          <Icon type="ios-star-outline">Icon>
          
          <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>

代码中的注意事项在注释中有所说明，这里说一下这段json，当我们想要增加卡片的时候，只需要增加json数据中的bookmarks数组即可。

当然，如果觉得在这里写太长的json很麻烦，我们也可以把json单独写成一个文件，之后加载进来即可。

本代码样例的运行结果如下图

题外话

个别项目配置说明(与例子不相关)

1.标题栏icon设置

文件：“build/webpack.dev.conf.js”和“build/webpack.prod.conf.js”，这两个文件中，找到“new HtmlWebpackPlugin”，添加代码“favicon : ‘icon.ico’”

如图

2.修改端口号

文件：“config/index.js”，很容易找到port参数，修改即可。

3.解决URL带有#号的问题

文件：“src/router/index.js”，在new Router下添加mode参数为history，如图：

4.“x-invalid-end-tag”错误问题(不知道是不是iview本身才这样子)

文件：“.eslintrc.js”，在rules配置中添加：“vue/no-parsing-error”: [2, { “x-invalid-end-tag”: false }]，如图：