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

[ 筆記 ] DOM - 事件傳遞機制:捕獲與冒泡、事件代理

[ 筆記 ] DOM - 事件傳遞機制:捕獲與冒泡、事件代理

D61_W8 (1 of 61)

D61_W8 (1 of 61)

CSS保健室|用圖片來取代文字標題

CSS保健室|用圖片來取代文字標題


Comments