Vue -- 动态组件与v-once指令（二十一）

最新推荐文章于 2024-03-07 11:32:47 发布
最新推荐文章于 2024-03-07 11:32:47 发布
阅读量273 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38287952/article/details/88288426
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <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: "#app",
        data: {
            type: 'child-one'
        },
        methods: {
            handleBtnClick: function () {
                this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
            }
        }
    });

</script>
</body>
</html>

 

Yee Jason
关注
专栏目录
Vue 动态组件与 v-once 指令的实现
10-17
Vue动态组件与v-once指令的实现知识点主要涵盖了Vue框架中的动态组件的概念、v-if和v-show指令的用法、以及v-once指令的特性与优化效果。下面将详细阐述这些知识点： 首先，动态组件的概念是指在Vue应用中，可以...
vue学习笔记之动态组件和v-once指令简单示例
09-17
动态组件和v-once指令 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> <component :is="type"></component> <button @click="handleBtnClick">change Vue.component('child-one', { ...
v-once
蓝墨の学习笔记
08-27 139
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app">
v-once命令
qq_44822110的博客
03-16 222
v-once命令 v-once 只编译一次，显示的信息不再修改，可以使用此指令， 提高性能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
v-once指令
zmzm666的博客
03-10 178
1、v-once所在节点在初次动态渲染后，就被视为静态内容了 2、以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
Vue 动态组件components和v-once指令的实现
10-16
在本文中，我们将探讨Vue的两个重要特性：动态组件（components）和`v-once`指令，并通过示例代码来理解它们的实现和应用。 一、动态组件（components） 动态组件是Vue.js中用于在同一个挂载点上动态渲染不同组件...
Vue:v-once
qq_41421033的博客
10-01 155
v-once 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】 <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js --> <span v-once>{{ msg}}</span> <script> new Vue({ el: '#app', data: { msg: 'Hello Vu
VUE——v-once指令
最新发布
汪汪汪汪
03-07 429
仅渲染元素和组件一次，并跳过之后的更新。'关于v-once的用法'
基本指令v-once
atu1111的博客
08-16 7967
基本指令v-once   v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或 组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容   下面示例，原本是每一秒展示动态随机数，但是因为使用v-once 首次渲染后，就不在改变数字了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
v-once是什么
我的博客
02-26 1738
v-once 能够让标签的内容，也就是{{str}}中，data里面的某个数据例如str，保持在vue的data初始化之后，str的第一个值。 具体情况是有次项目，要求显示上次表单填报过的内容，后台传过来的显示字段和我双向数据绑定的，后边要上传的接口字段是同一个（而且这个表单是根据后端传来的数组动态显示的，所以绑定的数据也是动态的）。 所以用下面的写法 <div v-once>{{str}} </div> <el-input v-model="str"></el-i
Vue技术—v-once指令
u013140948的博客
12-29 236
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指令
weixin_36210698的博客
12-14 1575
v-once指令 转自：https://cn.vuejs.org/v2/api/#v-once 不需要表达式 详细 只渲染2元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为表态内容并跳过。这可以用于优化更新性能。 &amp;lt;!-- 单个元素 --&amp;gt; &amp;lt;span v-once&amp;gt;This will never change: {{msg}}&amp;lt;/span&amp;gt...
vue_的基本格式
liu1992452008的博客http://write.blog.csdn.net/configu
11-18 782
fgffd{{msg}} 对对对{{msg}} new Vue({ el:'#app', data:{ msg:'今天的天气很好' } })
Vue之v-once指令
lancelote_pc的博客
03-19 334
v-once 指令 只渲染元素和组件一次，可以优化更新性能，执行一次性的插值，当数据改变的时候，插值出的内容不会更新 <div id="first"> <input type="text" v-model="name"/> <h1 v-once>{{name}}</h1> <h2>{{name}}</h2>...
vue中v-once
cmolong的博客
03-08 2718
v-once 作用： 执行一次性地插值，当数据改变时，插值处的内容不会更新，v-once所定义的元素或组件只会渲染一次，首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，该块都将被视为静态内容。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v...
33.Vue内置指令v-once指令
weixin_45843676的博客
02-19 175
33.Vue内置指令v-once指令
Vue的常用指令之v-once
Mr_xiaoxuboke的博客
05-19 173
说明： v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。 代码如下： <div id="app"> <h2 v-once>{{msg}}</h2> </div> <script src="vue.js"></script> <script> const app = new Vue({ el: "#app", data() {
Vue自定义指令详解：深入理解v-内置与自定义
1. v-model：这是Vue的核心指令，用于双向数据绑定，使得输入框与数据模型之间实时同步。通过`<input v-model="message">`，你可以轻松地实现表单数据的交互。 2. v-text：用于将数据插入到HTML文本中，但不支持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值