vue中常用的v-指令演示

vue中常用的v-指令演示

• v-text:元素的InnerText屬性,必須是雙標籤 跟{{ }}效果是一樣的 使用較少
• v-html: 元素的innerHTML
• v-if : 判斷是否插入這個元素,相當於對元素的銷燬和建立
• v-else-if
• v-else
• v-show 隱藏元素 如果確定要隱藏, 會給元素的style加上display:none。是基於css樣式的切換
• v-for 使用方式 v-fo="(item,index) in data" index 索引 item索引資料

 v-text 只能用在雙標籤中
 v-text 其實就是給元素的innerText賦值
 v-html 其實就是給元素的innerHTML賦值
 v-if 如果值為false,會留下一個<!---->作為標記，萬一未來v-if的值是true了，就在這裡插入元素
 如果有if和else就不需要單獨留坑了
 如果全用上  v-if 相鄰v-else-if 相鄰 v-else 否則 v-else-if可以不用
 v-if和v-else-if都有等於對應的值，而v-else直接寫
 v-if家族都是對元素進行插入和移除的操作
 v-show是顯示與否的問題
 注意: 指令其實就是利用屬性作為識別符號,簡化DOM操作,
  看：v-model="xxx"
  v-model 代表要做什麼  xxx代表針對的js記憶體物件
  寫在那個元素上，就對哪個元素操作