Vue的基本指令用法

2021-09-18 08:14:40 字數 893 閱讀 8479

迴圈:v-for (any為任何標籤)

} }

選擇:v-if

展示:v-show

v-if和v-show的區別為:v-if有更高的切換開銷,而v-show有更高的初始渲染開銷。

如果需要頻繁的切換使用v-show,反之,執行條件很少改變時使用v-if

雙向資料繫結:v-model (常用於表單)

用於v-model的修飾符:

(1)、.lazy 在預設情況下,v-model在input事件中同步輸入框的值與資料,但你可以新增乙個修飾符lazy,從而轉變為在change事件中同步.

(2)、.number 如果想自動將使用者的輸入值轉為number型別,可以使使用number修飾符,如果原值的轉換結果為nan,則返回原值

(3)、.trim 過濾使用者輸入的首尾空格

}	

單次繫結:v-once

}	}

事件繫結:v-on (可簡寫為@)

}	

屬性繫結:v-bind (可簡寫為:)

}	

文字繫結:v-text

}-->}	

}

標籤繫結:v-html

}	

v-text和v-html之間的區別:v-html中如果包含html標籤內容,v-html會解析而v-text不會

vue基本指令

指令是一些特殊的標記,給html新增一些原來沒有的功能 指令一 v model type text v model num type checkbox v model ischecked div const vm newvue 雙向資料繫結的原理底層通過 object.defineproperty ...

Vue基本指令

該指令表示元素和元件只渲染一次,當資料發生改變時,展示內容不會進行更新 v once h1 某些情況下,從伺服器請求到的資料本身就是乙個html 可以使用該指令進行對 的解析並渲染 v html url h1 div src js vue.js script data 該指令和mustache比較相...

Vue基本指令

又叫宣告式渲染 文字差值 語法 v bind繫結class 作用 給目標標籤的更新innertext innerhtml 語法 v text vue變數 v html vue變數 注意 它會覆蓋差值表示式 作用 給標籤繫結事件 語法 點我 1 點我增加1個 點我 5 點我扣除1 點我扣除10 效果 ...