[6] Vue 指令

v-bind

v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數,舉個例子
可以改寫成這樣
最後效果是一樣的,在標籤內 v-bind 可以簡寫成 :

v-model

上一篇已經提到了,就是可以透過網頁上的操作去改變資料的值,比方說表單、輸入欄等等。

v-for

迴圈,比方說你想重複什麼元件在網頁上,就可以用這個。馬上來示範一下
v-for 語法是 v-for="(陣列元素,陣列 index) in 陣列",然後元件標籤內要用 v-bind 綁定 key="index"

v-on

這個是綁定事件的指令,比方說想要按下按鈕有什麼行為,滑鼠移到某個元件上有什麼行為,語法是 v-on:事件="行為",舉例一下
v-on: 可以簡寫成 @

v-if

判斷指令,當符合什麼條件時,這個標籤才顯示,語法是 v-if="條件"
v-forv-if 不要在同一個標籤內一起使用,這樣每次迭代都會判斷一次,比較浪費效能
以行動支持創作者!付費即可解鎖
本篇內容共 469 字、0 則留言,僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你
張哲嘉
張哲嘉
I'm a full-stack engineer in Senao Networks. Vue/Django/MongoDB/Nginx
留言0
查看全部
發表第一個留言支持創作者!