vueでのダイナミックコンポーネントバインド(is)とキャッシュkeep-alive-tab切り替えand切り替え記入内容を保持
3819 ワード
<div class="well" id="app">
<a style="color:#7c79e5;"><strong>show(1)</strong>">movie</a> ||
<a style="color:#7c79e5;"><strong>show(2)</strong>">books</a>
<span style="color:#f33b45;"><strong> <keep-alive> </keep-alive></strong></span> <!--<keep-alive> , tab -->
<div class="well" style="color:#f33b45;"><strong>:is="flag"</strong>>
<!-- ！ -->
</div>
<span style="color:#f33b45;"><strong> </strong></span>
</div>
<script src="bower_components/vue/dist/vue.js"/>
<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: {
<strong> movies,</strong> //
<strong>books </strong> //
},
data: {
<strong> flag: "movies" </strong> // ( )
},
methods: {
<span style="color:#7c79e5;"><strong>show:</strong></span> function (<span style="color:#7c79e5;"><strong>flag</strong></span>) {
<span style="color:#f33b45;"><strong> if (flag == 1) {
this.flag = "movies" </strong></span>//
<span style="color:#f33b45;"><strong> } else {
this.flag = "books" </strong></span> //
<span style="color:#f33b45;"><strong> }</strong></span>
}
}
});
})()
</script>
</code></pre>
</div>
</div>
</div>
</div>