欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue學習筆記之動態(tài)組件和v-once指令簡單示例

 更新時間：2020年02月29日 18:30:05   作者：Rachel~Liu  
這篇文章主要介紹了vue學習筆記之動態(tài)組件和v-once指令,結(jié)合簡單實例形式詳細分析了vue.js動態(tài)組建點擊切換相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了vue動態(tài)組件和v-once指令。分享給大家供大家參考，具體如下：

點擊按鈕時，自動切換兩個組件

<component :is="type"></component>，當點擊按鈕之后，會自動清除原來的組件，顯示新的組件。

每一次切換，都需要銷毀+創(chuàng)建

但是這樣消耗有點大，所以我們在子組件中引用了v-once指令，這樣可以將顯示在頁面中的組件存到內(nèi)存中，不會完全銷毀。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>動態(tài)組件和v-once指令</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <component :is="type"></component>
<!--  <child-one v-if="type === 'child-one'"></child-one>-->
<!--  <child-two v-if="type === 'child-two'"></child-two>-->
  <button @click="handleBtnClick">change</button>
</div>
</body>
</html>
<script>
  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: '#app',
    data: {
      type: 'child-one'
    },
    methods: {
      handleBtnClick: function () {
        this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
      }
    }
  })
</script>

運行結(jié)果：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

希望本文所述對大家vue.js程序設計有所幫助。

相關(guān)文章

最新評論