我们使用v-if来完成一个切换登录方式的例子

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title></title>
    6.     </head>
    8.     <body>
    9.         <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    11.         <div id="app">
    12.             <template v-if="loginType === 'email' ">
    13.                 <h3>请输入您的邮箱</h3>
    14.                 <input type="text"  />
    15.             </template>
    17.             <template v-if="loginType === 'phone' ">
    18.                 <h3>请输入您的手机号</h3>
    19.                 <input type="text"  />
    20.             </template>
    22.             <br>
    23.             <button type="button" v-on:click="changetype()">切换登陆方式</button>
    24.         </div>
    26.         <script>
    27.             var vm = new Vue ({
    28.                 el: "#app",
    29.                 data: {
    30.                     loginType: "email",
    31.                 },
    32.                 methods: {
    33.                     changetype(){
    35.                         if (this.loginType == "phone") {
    36.                             this.loginType = "email";
    37.                         }else {
    38.                             this.loginType = "phone";
    39.                         }
    41.                     }
    42.                 }
    44.             })
    45.         </script>
    47.     </body>
    48. </html>

    我们会看到一个现象
    image.png
    这个现象就是说我们切换登录方式之后，输入的内容还会被保留，这是什么情况呢？
    主要是因为Vue的diff算法为了保证真实的Dom树最小变动，只修改了h3，而没有变动input
    Vue为了保证实体Dom树的最小变动，使用了diff算法，但是diff算法其实某一些方面还是会比较弱智
    所以我们可以给以上两个元素一个分别的key值,这样切换之后，我们发现之前输入的值就不会被保留了

    <div id="app">
            <template v-if="loginType === 'email' ">
                <h3>请输入您的邮箱</h3>
                <input type="text" key="1" />
            </template>

            <template v-if="loginType === 'phone' ">
                <h3>请输入您的手机号</h3>
                <input type="text"  key="2"/>
            </template>

            <br>
            <button type="button" v-on:click="changetype()">切换登陆方式</button>
        </div>

    在循环生成的节点中，vue强烈建议给每一个节点唯一且稳定的key值
    原因如下：
    image.png
    例子：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

        <div id="app">
            <ul>
                <li v-bind:key="item.id" v-for="(item,index) in productions">
                    {{item.name}} - {{item.stock}}
                </li>
            </ul>
        </div>

        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    productions: [
                        {id:1,name:"iphone",stock:15},
                        {id:2,name:"huawei",stock:16},
                        {id:3,name:"sanxing",stock:17},
                    ],
                },
            })
        </script>

    </body>
</html>