04_v-if / v-else

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style>
            .box,.box1{width:100px;height: 100px;background: red;}
            .box1{background: royalblue;}
        </style>
    </head>
    <body>
        <div id="app">
            <input type="checkbox" v-model="flag" />
            
            <!--
                Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
                所以 Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。
                只需添加一个具有唯一值的 key 属性即可
            -->
            <div class="box" v-if="flag" key="a">
                <input type="text" />
            </div>
            <div class="box1" v-else key="b">
                <input type="text" />
            </div>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    flag:true
                }
            })
        </script>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。