Vue 模板運用 Template


Posted by hoyi-23 on 2021-08-05

純文字插入

{{TEXT}}

HTML結構插入

使用v-html插入
在網頁上直接寫入html是危險的,可能導致 XSS攻擊 (透過用戶端輸入框寫入HTML來攻擊),因此v-html 只能用在可信任的內容上,不要用在用戶提交的內容上

單次綁定

v-once
只會輸出一次,之後輸出不會更著綁定

表達式插入

{{ text1 + text2 }}
{{ number1 * number2 }}
{{ text.split('').reverse().join('')}}

透過資料狀態操作HTML屬性

綁上ID

v-bind:id=" "
:id=" "

操作Input狀態 disabled

:disabled =" isDisabled" (true/false控制)


繼續閱讀其他文章

v-bind 動態屬性指令
v-model 資料雙向綁定










Related Posts

CSS - Flexbox實現footer置底

CSS - Flexbox實現footer置底

Web開發學習筆記17 — Terminal、Shell指令

Web開發學習筆記17 — Terminal、Shell指令

用C++做資料分析 | CERN ROOT 教學[02] - 資料匯入與簡單分析

用C++做資料分析 | CERN ROOT 教學[02] - 資料匯入與簡單分析


Comments