minds大学生科研项目平台开发：时间顺序显示日志，多余部分以滚动条显示。v-for传值index

首先要显示所有日志，并把多余显示不下的部分以滚动条形式呈现，v-for需要传递index，以保证用户可以点开日志查看。

  <div class="jouList">
    <ul>
          <li :index='index' v-for="(item,index) in jou">
        <div class="jou_item" @click="openJour(index)">
        <p class="jou_p">{{item.name}}</p>
        <p class="jou_p2">作者：{{item.author}}</p>
        <p class="jou_p3">{{item.content}}</p>
        <p class="jou_p4">{{item.date}}</p>
        </div>
          </li>
        </ul>
      <div id="bottom-bar">没有更多</div>

    </div>

然后利用v-show控制用户点击查看的日志是否显示，显示哪一篇

  <div id="journal" v-show="openJou">
  <button id="btn1" @click="closeJour"><返回</button>
  <p class="jou_p8">{{jou1.name}}</p>
<p class="jou_p5">作者：{{jou1.author}}</p>
<p class="jou_p6">{{jou1.date}}</p>
<p class="jou_p7">{{jou1.content}}</p>

  </div>

js部分定义控制显示日志的变量、数组

  data () {
    return {
    jou1:Object,
      jou:[],
      openJou:false
    }

  },

页面创建时就要发起请求从数据库读取所有日志

created() {
 
      this.$http.post('/api/MINDS/reaJournal').then((response)=>{
      for(var i=0;i<response.data.length;i++){
            this.jou=response.data;
            
          } 
        })


        .catch(function(err){
          console.log(err);
        });
      
    },
  methods:{
  openJour(index){
  this.jou1=this.jou[index]
        
  this.openJou=true;
 
  },
  closeJour(){
        
  this.openJou=false;
 
  }
  },