付費限定

[6] Vue 指令

更新於 發佈於 閱讀時間約 2 分鐘

v-bind

v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數,舉個例子

可以改寫成這樣

最後效果是一樣的,在標籤內 v-bind 可以簡寫成 :

v-model

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

v-for

迴圈,比方說你想重複什麼元件在網頁上,就可以用這個。馬上來示範一下

v-for 語法是 v-for="(陣列元素,陣列 index) in 陣列",然後元件標籤內要用 v-bind 綁定 key="index"

raw-image

v-on

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

v-on: 可以簡寫成 @

v-if

判斷指令,當符合什麼條件時,這個標籤才顯示,語法是 v-if="條件"

v-forv-if 不要在同一個標籤內一起使用,這樣每次迭代都會判斷一次,比較浪費效能

以行動支持創作者!付費即可解鎖
本篇內容共 469 字、0 則留言,僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
留言
avatar-img
留言分享你的想法!
avatar-img
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
張哲嘉的沙龍的其他內容
2022/10/10
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定,然後再做個連結到 nginx/sites-enabled,設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定,然後再做個連結到 nginx/sites-enabled,設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
Block direct access by ip 一旦將網站對外,就要開始面對這個險惡的世界每天遭受一堆攻擊,雖然大部分都無關痛癢,幾乎都是機器人在 scan ip 然後在發一些無意義的請求,或者亂試 api,看能不能試出來...,最好是哪麼好試啦,而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
Block direct access by ip 一旦將網站對外,就要開始面對這個險惡的世界每天遭受一堆攻擊,雖然大部分都無關痛癢,幾乎都是機器人在 scan ip 然後在發一些無意義的請求,或者亂試 api,看能不能試出來...,最好是哪麼好試啦,而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內,包含了 SECRET_KEY 等機密資訊,通常專案都會做版本控制上 git,但把這些機密資訊也上 git 是很不好的一件事,畢竟 github 也是曾經被駭過的,所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
2022/10/10
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內,包含了 SECRET_KEY 等機密資訊,通常專案都會做版本控制上 git,但把這些機密資訊也上 git 是很不好的一件事,畢竟 github 也是曾經被駭過的,所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
看更多
你可能也想看
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
Vue 自定義指令用於擴充功能,需要直接操作 DOM 時使用。常見例子如 v-focus 指令,使元素在插入 DOM 時自動獲得焦點。指令定義物件可提供多個生命週期鉤子函數,例如 mounted、updated 等。指令可以簡寫為函數,當行為在 mounted 和 updated 時相同時特別方便。
Thumbnail
Vue 自定義指令用於擴充功能,需要直接操作 DOM 時使用。常見例子如 v-focus 指令,使元素在插入 DOM 時自動獲得焦點。指令定義物件可提供多個生命週期鉤子函數,例如 mounted、updated 等。指令可以簡寫為函數,當行為在 mounted 和 updated 時相同時特別方便。
Thumbnail
在這個範例中,我們展示了如何使用 Vue 的 v-model 來實現各種表單元件的雙向綁定。範例包括文字輸入框、單選框、多選框、單選按鈕、下拉選單和多選下拉選單。使用 ref 創建響應式變數,並在 template 中使用 v-model 進行雙向綁定。這使得表單元件能夠即時反映和更新數據。
Thumbnail
在這個範例中,我們展示了如何使用 Vue 的 v-model 來實現各種表單元件的雙向綁定。範例包括文字輸入框、單選框、多選框、單選按鈕、下拉選單和多選下拉選單。使用 ref 創建響應式變數,並在 template 中使用 v-model 進行雙向綁定。這使得表單元件能夠即時反映和更新數據。
Thumbnail
使用 v-bind 可以將 HTML 屬性、樣式或類別綁定到 Vue 的數據,實現單向數據綁定。而 v-model 則是用於表單元素的雙向數據綁定,使輸入和數據同步更新。使用 v-bind 可以讓我們綁定非字符串值,例如布爾值或對象,從而在處理更複雜的應用場景時更為靈活。
Thumbnail
使用 v-bind 可以將 HTML 屬性、樣式或類別綁定到 Vue 的數據,實現單向數據綁定。而 v-model 則是用於表單元素的雙向數據綁定,使輸入和數據同步更新。使用 v-bind 可以讓我們綁定非字符串值,例如布爾值或對象,從而在處理更複雜的應用場景時更為靈活。
Thumbnail
這篇文章介紹了在 Vue.js 前端框架中如何有效地綁定 Class 和 Style。透過使用 v-bind 指令,使用者可以動態地切換元素的類別和內聯樣式,這不僅能夠簡化程式碼,還能防止錯誤的發生。文章中探討了物件和陣列綁定的使用情境,以及如何在組件中應用這些技術,從而提升開發效率與程式的可讀性。
Thumbnail
這篇文章介紹了在 Vue.js 前端框架中如何有效地綁定 Class 和 Style。透過使用 v-bind 指令,使用者可以動態地切換元素的類別和內聯樣式,這不僅能夠簡化程式碼,還能防止錯誤的發生。文章中探討了物件和陣列綁定的使用情境,以及如何在組件中應用這些技術,從而提升開發效率與程式的可讀性。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News