vue.js实战——vue元素复用

Vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，例：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <template v-if="type==='name'">
            <label>用户名：</label>    
            <input type="text" placeholder="输入用户名">
        </template> 
        <template v-else>
            <label>邮箱</label>
            <input type="text" placeholder="输入邮箱">
        </template>
        <button @click="handleToggleClick">切换输入类型</button>
    </div>
    <script>
        //input和label会被复用   不信你看控制台Elements    在用户名input输入内容后，点击button，会发现input的内容没有改变！！！！！
        var app=new Vue({
            el:'#app',
            data:{
                type:'name'
            },
            methods:{
                handleToggleClick:function(){
                    this.type=this.type==='name'?'mail':'name';
                }
            }
        })
    </script>
</body>
</html>

注意：：

可以使用添加key属性，取消元素的复用。（key值必须是唯一的！！！！！！！！）

posted @ 2019-02-20 17:40  聂小恶  阅读(1589)  评论(0)  编辑  收藏  举报