<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue keep-alive</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 相当于一级导航栏，点击可切换页面 -->
<ul>
<li @click="currentView = 'home'">Home</li>
<li @click="currentView = 'list'">List</li>
<li @click="currentView = 'detail'">Detail</li>
</ul>
<component :is="currentView" keep-alive></component>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
currentView:'home'
},
components:{
home:{
template:'<div>\
<p>Home</p>\
<ul>\
<li v-for="item in items">{{ item }}</li>\
</ul>\
</div>',
data:function(){
return {
items:[]
}
},
ready:function(){
console.log('fetch data');
this.items=[1,2,3,4,5];
}
},
list:{
template:'<div>List</div>'
},
detail:{
template:'<div>Detail</div>'
}
}
})
</script>
</body>
</html>注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。