动态组件和v-once指令——一个点击切换的按钮效果

最新推荐文章于 2023-01-04 10:56:51 发布
VIP文章 最新推荐文章于 2023-01-04 10:56:51 发布
阅读量121 收藏
点赞数
分类专栏： vue 文章标签： vue html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44561961/article/details/117590871
版权

文章目录

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、v-once和动态组件

v-once属性可以把数据放到内存而不是销毁，需要用到再拿出来，优化性能
vue自带的指的就是动态标签，会根据is里面数据的变化自动加载不同数据
在这里插入图片描述

二、使用步骤

1.引入库

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>互相展示隐藏的效果</title>
	<
最低0.47元/天 解锁文章
荒糖落
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue动态组件和v-once指令
qq_21987433的博客
12-20 220
1.Vue中使用动态组件 实例：实现使用一个按钮切换2个组件 【1】一般实现方法 <div id="root"> <child-one v-if="type=='child-one'"></child-one> <child-two v-if="type=='child-two'"></child-...
多次重复点击，只触发一次（vue指令实现）
mischievous_boy的博客
09-08 6870
使用场景： 提交表单的时候，只有在表单成功提交之后，才能下一次提交，处于网络请求中的时候，不能够提交。 付款的时候，只能够付一次，同样处于网络请求中，不能够提交等等 优点（也算是吧）： 相对于使用防抖和节流的操作，防抖和节流会受到网络请求的快慢影响，如果网络请求过慢，而且两次点击的时间超过防抖和节流预设的时间，还会触发多次的。本方式使用捕捉promise中resolve和reject的方式，更加精确在什么时候可以触发禁止点击和放开点击 相对于使用变量控制，不需要额外的..
Vue 2.0——v-once使用讲解
专注写bug
07-01 1592
在官方文档中，看见一个很好玩的标签，总感觉实用场景不多，特此记录下。 从案例中得知：此时对指定增加标签，效果如下： 不管等多久时间，数据变化后，不会再次刷新至页面进行显示。
VUE基本指令v-html、v-text、v-cloak、v-once、v-pro、v-on
weixin_41040445的博客
12-11 495
1、v-html、v-text、{{}} 上面三种都是渲染文本的方法，使用场景的区别 v-text和{{}}渲染结果类似，都是以文本类型进行渲染 区别： 1、{{}}在渲染结果之前，会有编译之前的文本显示，v-text没有这种现象 2、{{}}更加灵活，中间是可以添加内容的，v-text只能渲染data中的数据，中间不允许插入内容 <h1 v-text = "a">数值不显示</h1> <h1 >数值是{{a}}---</h1>
[Vue] 动态组件以及v-once的使用
BnuzLeon的博客
02-15 435
PROPS 例子 动态组件：code v-once指令： code 实现功能： 点击Change按钮，切换child-one和child-two组件。 动态组件 实现 1. 创建组件 Vue.component('child-one',{ template: '&lt;div&gt;child-one&lt;/div&gt;' }) Vue.component('child-two'...
Vue 动态组件与 v-once 指令的实现
10-17
主要介绍了Vue 动态组件与 v-once 指令的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue学习笔记之动态组件和v-once指令简单示例
09-17
主要介绍了vue学习笔记之动态组件和v-once指令,结合简单实例形式详细分析了vue.js动态组建点击切换相关操作技巧,需要的朋友可以参考下
Vue 动态组件components和v-once指令的实现
10-16
主要介绍了Vue 动态组件components和v-once指令的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue事件修饰符：v-once只执行一次
学亮编程手记
12-15 803
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style&gt
动态组件 —— 2种方式实现动态组件的切换,VUE 动态组件的应用案例分析
xueyue616的博客
04-08 2694
动态组件适用于在不同组件之间进行动态切换。我使用过2种方法来实现： （1）可以通过 Vue 的<component>元素加一个特殊的is特性来实现； （2）通过v-if来进行条件渲染，同样能实现。 下面是2种实现方法的代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> ...
vue使用动态组件实现TAB切换效果
m0_61663332的博客
12-22 8867
vue移动端使用动态组件实现tab切换效果
动态组件及tab切换高亮和多个组件间过渡
RR_chen的博客
05-11 652
实现下图效果： 动态组件 在不同组件之间进行动态切换。 通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现： <!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></component> 例： <div class="login-tab"> <a href="" @click=
Vue3 自定义指令
m0_62758542的博客
01-04 780
Vue3 自定义指令
Vue学习笔记 —— 指令（v-on、v-pre、v-once）与事件修饰符
weixin_43340295的博客
08-29 855
v-on指令 作用：对页面的事件进行绑定监听 语法：v-on:事件类型=“事件处理的函数” //如果时间直接绑定函数名称， //那么默认会传递事件的对象作为函数的第一个参数event <button type="button" v-on:click="handle(123)">点击</button> //在vue中，想传入自定义的实参值，又想获取事件对象， //可以借助$event关键字，它是vue框架内部专门指向事件对象的关键字 <button type="button"
vue中动态组件与v-once指令，简单小示例
Qin的专栏
05-10 1108
&lt;body&gt; &lt;div id="root"&gt; &lt;component :is="type"&gt;&lt;/component&gt; &lt;!-- 等同于下面注释掉的部分 --&gt; &lt;!-- &lt;child1 v-if="type==child1"&gt;
vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为
热门推荐
涂涂
01-18 15万+
其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown....... 以下click为例 注意：所有的v-on都可以简写为@，比如说v-click可以简写为@click 1.监听事件 可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常来讲就是
Vue技术—v-once指令
u013140948的博客
12-29 216
v-once指令： 1.v-once所在节点在初次动态选然后，就视为动态内容了， 2.以后数据的改变不会引起v-once所在结构的变更，可以用于优化性能 <div id="root"> <h2 v-once>当前n的值时：{{n}}</h2> <h2>当前n的值时：{{n}}</h2> <button @click='n++'>点我n+1</button> </div> <script> ne
Vue v-once
秋殇阁
07-18 1万+
v-once这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。 下面我们看个例子，我们先不使用v-once指令： &lt;!--v-once示例--&gt; &lt;template&gt; &lt;div&gt; &lt;div&g...
v-for和v-once的用法及自定义指令
cristina_song的博客
09-19 716
&amp;lt;template&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;h1&amp;gt;Hello Vuex&amp;lt;/h1&amp;gt; &amp;lt;p&amp;gt;{{aaa}}&amp;lt;/p&amp;gt; &amp;lt;button
V-once 使用例子
最新发布
05-09
下面是一个使用 v-once 的例子： ```html <h1 v-once>{{ title }} <p v-once>{{ content }} export default { data() { return { title: "这是标题", content: "这是内容", }; }, }; ``` 在上面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值