- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 动态组件与 v-once 指令
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
- </script>
- </head>
- <body>
- <div id="root">
- <child-one v-if="type==='child-one'">
- </child-one>
- <child-two v-if="type==='child-two'">
- </child-two>
- <button @click="handleBtnClick">
- change
- </button>
- <component :is="type">
- </component>
- </div>
- <script type="text/javascript">
- Vue.component('child-one', {
- template: ` < div v - once > child - one < /div>`
- })
- Vue.component('child-two', {
- template: `<div v-once>child-two</div > `
- }) var vm = new Vue({
- el: '#root',
- data: {
- type: 'child-one'
- },
- methods: {
- handleBtnClick() {
- this.type = this.type === 'child-one' ? 'child-two': 'child-one'
- }
- }
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3262161.html