首先要显示所有日志，并把多余显示不下的部分以滚动条形式呈现，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;
}
},