vue13-解决标签复用问题

「爱情、让人受尽委屈。」 2022-05-10 00:52 223阅读 0赞

首先看下面代码

<!DOCTYPE html>
    <html lang=en>
        <head>
            <meta charset="utf-8"/>
            <title>Hello world</title>
            <script src="vue.js"></script>
        </head>
        <body>
            <div id="root">
                <div v-if="show">
                   用户名： <input />
                </div>
                <div v-else>
                    邮箱：<input />
                </div>
            </div>
    
    
            <script>
                var vm = new Vue({
                   el:"#root",
                   data:{
                       show:true,
                   }
                })
    
            </script>
        </body>
    </html>

当我们再input中输入内容，然后切换show的值时，input标签做了复用，里面的内容不会清楚。解决方法，在标签中加一个key属性，表明这是唯一元素

<div v-if="show">
                   用户名： <input key="username"/>
                </div>
                <div v-else>
                    邮箱：<input  key="mail"/>
                </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue可复用解决方案

目录一. 自定义指令 1.1.全局指令 1.2.局部指令 1.3.指令参数二. Mixin混入 2.1.基本用法 2.2. 混入优先级 2.3.全局 Mix

淡淡的烟草味﹌/ 2024年04月06日 12:06/ 0 赞/ 107 阅读

相关 Vue---解决基于Elemet框架标签的Vue事件无效问题

问题基于Element UI框架的标签使用Vue事件（例如@keyup.enter、@dblclick）无效，触发不了事件。解决在事件后面加上

小鱼儿/ 2023年07月21日 06:08/ 0 赞/ 31 阅读

相关 13-函数的封装和复用

13-函数的封装和复用 //为何使用函数？ //能够对代码进行复用：只要定义一次代码，就可以多次使用它。 //能够多次向同一函数传递不同的参数，以产生不同的结果。

素颜马尾好姑娘i/ 2023年07月18日 05:51/ 0 赞/ 34 阅读

相关 Vue表格组件复用

复用的原则，将DOM的操作交给开发者，比如表头和表体，而封装只是将，样式和一些通用的方法进行封装。目前想法是通过插槽进行实现，表格外框的内容是固定的，但是表头和表体是通

待我称王封你为后i/ 2023年05月31日 12:25/ 0 赞/ 24 阅读

相关 selenium复用浏览器解决登录问题

以Google浏览器为例：首先打开cmd，使用命令启动一个Debug监听端口的浏览器（启动前要先关闭chrome所以窗口） C:\Program Files (x

柔情只为你懂/ 2022年12月12日 04:48/ 0 赞/ 288 阅读

相关初识vue（13）—— 解决 vue 跨域问题

> 当我们请求一个接口的时候，出现下图所示情况，说明请求跨域。 ![在这里插入图片描述][20210219103303159.png] > 那么如何解决跨域问题呢？ >

女爷i/ 2022年10月30日 11:21/ 0 赞/ 216 阅读

相关 Git-13_标签

![Center][] [Center]: /images/20220806/cd71e84bea1946548572f371f0ee8cd9.png

偏执的太偏执、/ 2022年08月06日 00:27/ 0 赞/ 209 阅读

相关 vue13-解决标签复用问题

首先看下面代码 <!DOCTYPE html> <html lang=en> <head> <meta charset

「爱情、让人受尽委屈。」/ 2022年05月10日 00:52/ 0 赞/ 224 阅读

相关 vue----webpack模板----组件复用解决方法

组件复用当前组件被复用（没有被销毁或者创建）的时候，路径会发生改变，但是，值不会发生改变因为：created(){}接收值，但是created

淩亂°似流年/ 2021年12月23日 10:17/ 0 赞/ 278 阅读

相关 vue复用组件不刷新的解决方案

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路

素颜马尾好姑娘i/ 2021年10月19日 05:48/ 0 赞/ 757 阅读