zoukankan html css js c++ java

动态组件与v-once指令

动态组件

Vue内置<component :is="name"></component>根据is属性绑定Vue实例中data里面对应的数据名，动态切换组件，然后自动加载不同组件。

<body>
  <div id="root">
   <!-- <child-one v-if="type==='child-one'"></child-one>
   <child-two v-else="type==='child-one'"></child-two>-->
    <component :is="type"></component>
   <button @click="handleBtnClick">change</button> 
  
  </div>
 <script>
   Vue.component('child-one',{
    template:'<div>child-one</div>'
   })
   Vue.component('child-two',{
    template:'<div>child-two</div>'
   })
   var vm=new Vue({
    el:'#root',
    data:{
      type:'child-one'
    },methods:{
      handleBtnClick:function(){
        this.type=(this.type==='child-one'?'child-two':'child-one');
      }
    }
   })
 </script>
</body>

v-once指令

会将第一次展示在页面中的资源保存在内存中，下一次直接加载缓存（内存中的资源），提高静态内容的展示效率。

<body>
  <div id="root">
    <child-one v-if="type==='child-one'"></child-one>
    <child-two v-if="type==='child-two'"></child-two>
    <!-- <component :is="type"></component> -->
   <button @click="handleBtnClick">change</button> 
  
  </div>
 <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:'#root',
    data:{
      type:'child-one'
    },methods:{
      handleBtnClick:function(){
        this.type=(this.type==='child-one'?'child-two':'child-one');
      }
    }
   })
 </script>
</body>

查看全文

相关阅读:
PHP 消息队列
 Nginx 设置负载均衡
 Nginx 服务器搭建
 PHP 获取文件扩展名的五种方式
 高并发和大流量解决方案
 <面试> PHP 常见算法
 Mysql 预查询处理事务机制
 Linux定时任务结合PHP实现实时监控
 Swoole 结合TP5搭建文字直播平台
 <记录> PHP Redis操作类

原文地址：https://www.cnblogs.com/tengteng0520/p/12071579.html