# 6.Vue v-if form表格

###### tags:`Vue`

1. 描述同步Select更改-1
(*適用於在html列出選項)
1. 描述同步Select更改2
(*適用於在JS陣列資料帶入方式)
1. 多選
(*使用按住<kbd>shift</kbd>不放,滑鼠點選多個選項)
1. cheack-box切換兩種值
*利用<kbd>cheack-box</kbd>的<kbd>true</kbd>和<kbd>fasle</kbd>做兩種不同值切換
1. 修飾符-1 按enter後才在畫面上顯示 inputtype裡的文字
(*<kbd class="mx-1"> v-model=""</kbd>後面加上<kbd class="mx-1">.lazy</kbd>變成<kbd class="mx-1"> v-model.lazy=""</kbd>)
1. 修飾符-2讓字串轉乘數字數值
(所有輸入框預設輸入都是<kbd class="mx-1">string</kbd>字串,但是輸入年齡之類數字需要轉乘數字的值,使用在<kbd class="mx-1">v-model=""</kbd>`後面加上<kbd class="mx-1">.number</kbd>變成<kbd class="mx-1">v-model.number=""</kbd>,ps:<kbd>{{ typeof(age)}}</kbd>可以測試輸出資料是怎樣類型)

<iframe height="265" style="width: 100%;" scrolling="no" title="computed_watch" src="https://codepen.io/corly74/embed/dyOVYWg?height=265&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/corly74/pen/dyOVYWg'>computed_watch</a> by peiyun
(<a href='https://codepen.io/corly74'>@corly74</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>