文档章节

vue中使用key管理可复用的元素

o
 osc_z1hvg4cu
发布于 2018/04/24 14:18
字数 208
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1、概述

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。

key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们。

2、示例

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>vue中使用key管理可复用的元素</title>
    </head>

    <body>
        <div id="root">
            <template v-if="loginType === 'username'">
                <label>Username</label>
                <input placeholder="Enter your username" key="username-input">
            </template>
            <template v-else>
                <label>Email</label>
                <input placeholder="Enter your email address" key="email-input">
            </template>
            <button @click="toggleLoginType">Toggle login type</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">
            var vm = new Vue({
                el: '#root',
                data: {
                    loginType: 'username'
                },
                methods: {
                    toggleLoginType: function() {
                        return this.loginType = this.loginType === 'username' ? 'email' : 'username'
                    }
                }
            });
        </script>
    </body>

</html>

每次切换时,输入框都将被重新渲染。

 

上一篇: vue组件class绑定
下一篇: vue 事件修饰符
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

浅谈对python pandas中 inplace 参数的理解

这篇文章主要介绍了对python pandas中 inplace 参数的理解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 pandas 中 inplace 参数在很多函数中都会有,它的作用是:是否...

Linux就该这么学
5分钟前
0
0
C++ 从基本数据类型说起

前言 int 在32位和64位操作系统,都是四个字节长度。为了能编写一个在32位和64位操作系统都能稳定运行的程序,建议采用std::int32_t 或者std::int64_t指定数据类型。*与long随操作系统子长变...

osc_sxdofc9c
5分钟前
0
0
游戏音乐的作用以及起源

游戏音乐是由特殊的音乐、语言符号、美学符号组成,在电子游戏的发展下,游戏音乐越来越成熟,游戏音乐与美术相融合,能够带给玩家视觉与声音的感官冲击,形成游戏音乐所具有的独特的审美效果...

奇亿音乐
5分钟前
0
0
2020,最新Model的设计-APP重构之路

很多的app使用MVC设计模式来将“用户交互”与“数据和逻辑”分开,而model其中一个重要作用就是持久化。下文中设计的Model可能不是一个完美的,扩展性强的model范例,但在我需要重构的app中,...

osc_mfzkzkxi
6分钟前
0
0
面对职业瓶颈,iOS 开发人员应该如何突破?

我们经常看到 iOS 开发人员(各种能力水平都有)的一些问题,咨询有关专业和财务发展方面的建议。 这些问题有一个共同点:前面都会说“我现在遇到了职业困境”,然后会问一些诸如“我是否应该...

osc_gfpedeca
7分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部