標籤：src for app htm 改變 text round 複用 為什麼
1.v-if：這裡的官網文檔看完後趕腳v-if就是用來判斷元素是顯示還是隱藏。
2.template這個封裝元素感覺挺好用，以後把需要某些特定操作才出現的元素存放進去挺好。
3.前面看的網友寫的還可以配合v-show來使用，結果運行後沒效果。看來還是得老實看官網簡介：
v-else-if與v-else使用大同小異，不了。
4.用 key 管理可複用的元素
沒有代碼測試是不完整的，再說疑問也多啊。是時候貼代碼寫測試結果了：
HTML代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 測試執行個體 - 菜鳥教程(runoob.com)</title></head><body><div id="app"> <template v-if="loginType === ‘username‘"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template></div><script src="js/vue.js"></script><script> var vm = new Vue({ el: ‘#app‘, data: { loginType: ‘username‘ } })</script></body></html>View Code
1）當兩個input添加了不同值的key屬性後，loginType值發生改變時，新出現的input只會出現placeholder裡的值，看來是重新渲染了。
2）只設定一個input有key屬性後，新出現的input同樣只是出現placeholder裡的值，畢竟有key屬性與沒有key屬性還是不同的。
3）當兩個input的key屬性都設定為空白或值相同時，input不會被重新渲染，會保留已經輸入的值。
4）label元素為什麼會被複用，畢竟它們的text內容不同啊？
5.v-show指令的使用也相對簡單，即使中OK值設定為0或者false或者不設定，在瀏覽器解析後的CSS屬性display:none。
v-if與v-show的比較，這文檔寫的還好：
v-if與v-for在後面“列表渲染指南”時再細看。
Vue.js（2.x）之條件渲染
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
