v-once指令怎么在vue中使用-创新互联

这篇文章给大家介绍v-once指令怎么在vue中使用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

10年积累的成都网站设计、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有青川免费网站建设让你可以放心的选择与我们合作。

具体如下：

点击按钮时，自动切换两个组件

<component :is="type"></component>，当点击按钮之后，会自动清除原来的组件，显示新的组件。

每一次切换，都需要销毁+创建

但是这样消耗有点大，所以我们在子组件中引用了v-once指令，这样可以将显示在页面中的组件存到内存中，不会完全销毁。

<!DOCTYPE html>
<html lang="en">
<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="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>

运行结果：

v-once指令怎么在vue中使用

关于v-once指令怎么在vue中使用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

文章题目：v-once指令怎么在vue中使用-创新互联
URL地址：https://www.cdcxhl.com/article46/edshg.html

成都网站建设公司_创新互联，为您提供网站收录、网站内链、小程序开发、企业网站制作、网站策划、品牌网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容