vue 條件渲染，v-if ,v-show;這兩個的值是true時候，dom中的元素都會渲染出來，當值為false的時候，if渲染的元素不會在dom中出現，show渲染的dom元素是style:display:none;兩者有這樣的區別，同時v-if else 兩者使用的時候中間不能有其他的元素，否則會失效，例如在兩個div中，一個div是v-if,另一個是else,在這兩個div中都有input標簽，當input標簽發生change實際的時候，v-if的值由false變成true,如下面的例子：在這裏郵箱顯示的，當發生chang事件時候即方法hanleFinish執行，改變show的值，這裏input必須加key值，值可以自定義，不然在郵箱裏輸入的值會在用戶名的input上顯示出來。

<div v-if="show">
 用戶名： <input type="text" key="one">
</div>
<div v-else>
  郵箱名: <input type="text" @change="hanleFinish" key="two">
</div>

<script>
  export default {
    props: [‘list‘],
    data ()
    {
     return {
        show:false,
      }，

methods: {
  hanleFinish(){
    this.show = true;
  }
},   }

</script>

Vue 條件渲染