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

轉職前端工程師之路 Day4

轉職前端工程師之路 Day4

Array Cardio Day 1

Array Cardio Day 1

Vue.js 學習旅程Mile 14 – Form Input Bindings 表單綁定篇:v-model

Vue.js 學習旅程Mile 14 – Form Input Bindings 表單綁定篇:v-model


Comments