版权声明:仅仅菜鸟,愿帮到工作中预bug困惑的您 https://blog.csdn.net/weixin_41716259/article/details/88050739
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<title></title>
</head>
<body>
<div class="well" id="app">
<a @click="show(1)">movie</a> ||
<a @click="show(2)">books</a>
<keep-alive> <!--<keep-alive>缓存数据,即tab切换时保留填写内容-->
<div class="well" :is="flag">
<!--此处显示的是切换后的具体内容! -->
</div>
</keep-alive>
</div>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
(function () {
var books = {
template: `<div>
<h1>畅销书</h1>
<ul><li v-for="book in books">{{book}}</li></ul>
<div>
<h2>{{msg}}</h2>
<input type="text" v-model="msg">
</div>
</div>`,
data() {
return {
books: ["angular", "vue", "react"],
msg: ""
}
}
}
var movies = {
template: `<div>
<h1>最新电影</h1>
<ul><li v-for="movie in movies">{{movie}}</li></ul>
<div>
<h2>{{msg}}</h2>
<input type="text" v-model="msg">
</div>
</div>`,
data() {
return {
msg: "",
movies: ["电影1", "电影2", "电影3"]
}
}
}
new Vue({
el: "#app",
components: {
movies, //组件名
books //组件名
},
data: {
flag: "movies" //同上面组件名(首次展示默认值)
},
methods: {
show: function (flag) {
if (flag == 1) {
this.flag = "movies" //同上面组件名
} else {
this.flag = "books" //同上面组件名
}
}
}
});
})()
</script>
</body>
</html>