动态组件于v-once指令

最新推荐文章于 2020-02-20 12:41:32 发布
最新推荐文章于 2020-02-20 12:41:32 发布
阅读量218 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VVVZCS/article/details/82352833
版权

先看两个子组件

现在想要实现一个按钮每一次点击之后，child-two和child-one交替出现

那么现在我们也可以通过动态组件来实现这个功能

发现效果完全一样，这是因为component是Vue里面的动态标签，它能够自动根据is里的内容，选择不同的子组件

------------------------------------------------------------------------------------

我们在跳出child-one和child-two的时候，Vue其实是销毁一个然后再从新建立另一个，一直重复这个过程，这样子比较废性能，因为child-one我们并没有发生改变，如果能存储到内存就好了，每次只要调用就可以

v-once指令就是用来干这种事情的

页面刚加载的时候v-once会把child-one存到内存中，

当我们点击change之后，又把child-two存到内存中，以后再点击就不需要重新销毁再重建了

VVVGG
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue--动态组件与v-once指令
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
04-04 166
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态组件与v-once指令</title> <script src="./vue.js"></script> </head> <body> ...
Vue 动态组件与 v-once 指令的实现
10-17
主要介绍了Vue 动态组件与 v-once 指令的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
初识 Vue（21）---（Vue中的动态组件与v-once指令）
姜皓的博客
07-29 327
Vue中的动态组件与v-once指令 案例：点击按钮，child-one 变成 child-two；child-two 变成 child-one &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue中的动态组件与v-
Vue_动态组件与v-once指令
大脸猫~
06-30 422
一.component动态组件 动态组件是根据判断值决定是否显示该组件&amp;lt;component&amp;gt; 根据is的值来显示相应的组件是否应该显示 使用的方法： &amp;lt;component :is='changeConponents'&amp;gt;&amp;lt;/component&amp;gt; &amp;lt;button @click=&quot;changeclick&quot;&amp
动态组件和v-once指令
zl13015214442的博客
02-24 142
1、动态组件 我们首先看一个例子，首先定义两个子组件，要实现的功能是点击change按钮，进行两个组件的切换： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动态组件与v-once指令&lt;/title&
Vue动态组件、v-if+v-once、v-show的区分使用
卓越无关环境，保持空杯心态——靡不有初，鲜克有终
02-20 3315
当我们想做出一个toggle的效果，比如点击一下显示文字1，再点击显示文字2，再点击显示文字1....这样交替进行的时候，大家是怎么做的呢？ ...
Vue：动态组件与v-once指令
Boxbiu的博客
11-23 211
通过组件实现一个简单的点击切换功能 <div id="app"> <child-one v-if="type === 'child-one' "></child-one> <child-two v-if="type === 'child-two' "></child-two> <button @click="...
Vue动态组件与v-once指令
A cold winter的博客
12-02 122
动态组件会根据is属性数据的变化动态自动加载不同的组件，下面这段代码就是通过动态组件实现了一个toggle的功能 <body> <div id="root"> <component :is="type"></component> <button @click="handleClick">change</button&...
Vue--动态组件与v-once指令
AsaZyf的博客
11-04 187
code： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;动态组件与v-once指令&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/vue/2.5.17-
vue学习笔记之动态组件和v-once指令简单示例
09-17
动态组件和v-once指令 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <component :is="type"></component> <button @click="handleBtnClick">change Vue.component('child-one'...
Vue 动态组件components和v-once指令的实现
10-16
在本文中，我们将探讨Vue的两个重要特性：动态组件（components）和`v-once`指令，并通过示例代码来理解它们的实现和应用。 一、动态组件（components） 动态组件是Vue.js中用于在同一个挂载点上动态渲染不同组件...
移动端一倍图，二倍图，三倍图尺寸的问题
热门推荐
VVVZCS的博客
09-07 1万+
1 rem = html font-size = 50px 在reset.css文件中 假如一个二倍图的div高度是86px 那么对应的我们应该填43px 移动端一般用rem表示宽高 所以这里我们应该填写0.86rem 如果一个一倍图的高度是23px 那么我们应该填写0.46rem 同理3倍图...
window.addEventListener('scroll', yourFunction)的问题
VVVZCS的博客
09-10 1万+
假如我们在一个页面中设置了window.addEventListener('scroll', this.handleScroll)，那么当我们使用路由跳转到其他页面的时候，可能就会仍停留在原来的位置，什么意思呢， 就是我们在A页面中滑动到比如距离Top500px的距离，这个时候在A页面的500px地方有一个路由可以跳转到B页面，B页面设置了window.addEventListener('scr...
vuex模块中使用namespaced之后的引用方法
VVVZCS的博客
11-15 1万+
store-&gt;index.js export default new Vuex.Store({   state,   mutations,   actions,   modules: {     user   } })   user.js const state = {   userName: 'ReSword' } const mutations = {   // } const a...
Vue项目前后端接口的联调
VVVZCS的博客
09-10 1万+
我们在之前的项目中，使用的都是本地的JSON数据文件，那么在实际项目开发过程中，肯定是不能用本地的JSON文件的，所以我们需要把JSON文件放在服务器上，我们使用的是Apache2.4本地服务器 1，下载压缩包 http://httpd.apache.org/download.cgi 2，下载完之后，解压到自己定义的目录 D:\DevelopTools\Apache 然后更改...
解决keep-live使用之后的问题
VVVZCS的博客
09-10 5554
keep-aliv能够帮助我们实现页面ajax请求只被请求一次，在你跳转页面的时候，也不会被请求多次，可是比如在旅游页面中，当我们在城市选择页面重新选择城市，这个时候就需要重新发送一个ajax请求，来显示对应城市的推荐内容 解决方法1： 使keep-alive新增的一个生命周期函数activated（实际上还有一个对应的deactivated函数），这个函数和mounted相比，mounted...
Vue当中子组件无法获取父组件值的情况
VVVZCS的博客
10-17 5215
parent.vue &lt;template&gt; &lt;div&gt; &lt;roles :roleData="item" v-for="item of roleData"&gt;&lt;/roles&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import Roles
vue中v-once
最新发布
04-29
在Vue中，v-once是一个指令，用于将元素或组件标记为只渲染一次，不会随后续数据的更改而重新渲染。...这些示例中，使用v-once指令的元素或组件将只在初始渲染时进行渲染，不会再根据数据的更改而重新渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值