動態元件 & 非同步元件:在動態元件上使用 keep-alive
阿新 • • 發佈:2021-01-06
技術標籤:vue教程
<div id="demo"> <div class='container'> <div class="row"> <button class="btn btn-default" v-on:click="changeShow">change page</button> <keep-alive> <component :is="show"></component> </keep-alive> </div> </div> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script> var vm = new Vue({ el:"#demo", data:{ show:"pageFirst" }, components:{ pageFirst:{ data:function(){ return {showColor:'red'} }, template:` <div v-bind:style="{backgroundColor:showColor,width:'60px',height:'60px'}" v-on:click="changeColor" ></div> `, methods:{ changeColor(){ if(this._data.showColor === "red") this._data.showColor = "black" else this._data.showColor = "red" } } }, pageSecond:{ template:` <div>222</div> ` } }, methods:{ changeShow(){ debugger if(this.show === "pageFirst") this.show = "pageSecond" else this.show = "pageFirst" } } })
//參考:https://blog.csdn.net/wust_cyl/article/details/82986620
//參考:萌新入坑91https://www.cnblogs.com/gongshunfeng91/p/11282133.html