vue学习笔记之动态组件和v-once指令简单示例
更新时间：2020年02月29日 18:30:05 作者：Rachel~Liu
这篇文章主要介绍了vue学习笔记之动态组件和v-once指令,结合简单实例形式详细分析了vue.js动态组建点击切换相关操作技巧,需要的朋友可以参考下
本文实例讲述了vue动态组件和v-once指令。分享给大家供大家参考，具体如下：
点击按钮时，自动切换两个组件
<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>
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
这篇文章主要介绍了Python文件读写w+和r+区别解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了python如何为list实现find方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Python实现判断变量是否是函数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
eval(str)函数很强大,官方解释为将字符串str当成有效的表达式来求值并返回计算结果,下面这篇文章主要给大家介绍了关于Python eval() 函数的相关资料,需要的朋友可以参考下2022-01-01
Python2.x版本中maketrans()方法的使用介绍
这篇文章主要介绍了Python2.x版本中maketrans()方法的使用介绍,是Python学习中的基础知识,需要的朋友可以参考下2015-05-05
大家好，本篇文章主要讲的是用python实现操纵mysql数据库插入，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下2022-01-01
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
django+uwsgi的部署实在是太蛋疼了.网上已有的教程似乎有新版本的兼容问题。最后跑到uwsgi官网上找的教程终于跑通了.. 不过官网的教程似乎有引导教学性质，部署的时候就显得很绕弯路，在这里记录下来精简内容2014-11-11
在本篇文章里小编给大家整理的是一篇关于如何在Python中创建一个简单的神经网络的相关知识点，有兴趣的朋友们可以参考下。2021-01-01
这篇文章主要介绍了python写个俄罗斯方块，帮助大家更好的理解和使用python，感兴趣的朋友可以了解下2020-11-11
这篇文章主要为大家详细介绍了python+pyqt5编写md5生成器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-03-03
最新评论