[Vue.js] 切換畫面可能遇到的問題

by ShadowKao

HTML

<!DOCTYPE html>
<html lang="utf-8">

  <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>[Vue.js] 切換畫面可能遇到的問題</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
      body {
        padding-top: 30px;
      }

    </style>
  </head>

  <body>
    <div class="container" id="myApp">
      <div class="row">
        <!--v-if會重新渲染畫面-->
        <div class="form-group col-xs-12">
          <input type="checkbox" v-model="isChecked" /> <label>請勾我</label>
        </div>


       
        <div v-if="isChecked" class="form-group col-xs-12">
          v-if 沒綁定: <input type="text" placeholder="沒綁定" />
        </div>
        <div v-else class="form-group col-xs-12">
          v-else 沒綁定 <input type="text" placeholder="沒綁定" />
        </div>
				
				
				 
        <div class="form-group col-xs-12">
          使用v-bind:key (維持不綁定，不完美的解法，輸入的值在切換後消失)↓
        </div>
        <div v-if="isChecked" class="form-group col-xs-12">
          v-if 沒綁定但有key: <input type="text" placeholder="沒綁定" v-bind:key="1" />
        </div>
        <div v-else class="form-group col-xs-12">
          v-else 沒綁定但有key <input type="text" placeholder="沒綁定" v-bind:key="2" />
        </div>






        <div class="form-group col-xs-12">
          使用v-model解法(雙向綁定)↓
        </div>
        <div v-if="isChecked" class="form-group col-xs-12">
          v-if 有綁定<input type="text" placeholder="有綁定" v-model="myIf" />
        </div>
        <div v-else class="form-group col-xs-12"> 
          v-else 有綁定<input type="text" placeholder="有綁定" v-model="myElse" />
        </div>

        <div class="form-group col-xs-12">
          改用v-show解法(不綁定)↓
        </div> 
        <div v-show="isChecked"...