vue的条件渲染

最新推荐文章于 2022-10-19 21:04:35 发布

在此悟道

最新推荐文章于 2022-10-19 21:04:35 发布

阅读量88

点赞数

文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_40699635/article/details/115693129

版权

vue根据条件渲染会尽可能的复用之前的dom框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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() {
            return {
                show:false
            }
        },
    })
</script>
</body>
</html>

同样存在一个input输入框，当切换show的状态时邮箱名显示为用户名，但是input框中的值并没有清空，造成这种情况的原因是因为vue会尽可能的复用dom元素来提高效率，对于这种情况可以增加一个key值来进行区分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div v-if="show">
        用户名 <input key="name">
    </div>
    <div v-else>
        邮箱名 <input key="email">
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data() {
            return {
                show:false
            }
        },
    })
</script>
</body>
</html>

上述情况就不会存在了，祝好

在此悟道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的条件渲染

vue根据条件渲染会尽可能的复用之前的dom框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script></head><body><div id="root"> &l
复制链接

扫一扫