指令v 使用

2022-10-11 01:48:10 字數 744 閱讀 3149

1.v-text

用來設定當前元素的文字內容,相當於dom物件的 innertext或textcontent

2.v-html

更新dom物件的 innerhtml

3.v-bind

通過v-bind為html元素繫結屬性,使用data中提供的資料;

因為 v-bind:title 這種使用方式很繁瑣,所以,vue提供了乙個簡化語法 :title

4.v-on

繫結事件,支援js所有的事件型別, v-on繫結的事件方法都要寫在vue例項中的methods物件中;

v-on:省略寫 @

5.v-model

在表單元素上建立雙向資料繫結;

只能用在表單元素中,注意:不同的表達元素,v-model的表現可能會有所不同。

比如:v-model操作文字框的value屬性,而核取方塊 v-model 就是操作其選中狀態;

6.v-for

基於源資料多次渲染元素或模板塊,不僅可以渲染集合list也可以遍歷物件obj;

7.v-bind:class和v-bind:style

表示式的型別:字串、陣列、物件(重點)

8.v-if

根據表示式布林值的真假條件是否載入這段**, true:dom中會載入這段**,false:dom中不會載入這段**;

9.v-show

根據表示式之真假值,切換元素的 display css 屬性,無論true還是false dom中都會載入這段**;

Vue內建v 指令

什麼是指令 是一種特殊的自定義行間屬性 也就是在html標籤內寫 指令的職責就是當其表示式的值改變時相應地將某些行為應用到dom上,在vue中,指令以 v 開頭 v bindv bind 動態繫結資料。簡寫為 以後的 class v onv on 繫結時間 簡寫為 例 click v textv t...

V 指令,細節補充

v for遍歷物件的時候 v for item in person 這裡item是person物件裡面的value值 而v for item,key in person 這裡的 key 第二個引數是value的key。屬性 當v for item,key,index in person 這裡的ind...

2020 10 18 v 常見指令

寫在前面 利用腳手架搭建乙個vue專案,然後開始學習。過程省略 正式內容 現代開發模式 傳統開發模式 代表vue react jquery 特點20 表現層 80 表現層 現代開發模式的代表就是vue react,與傳統開發模式的大部分精力在class和樣式中,vue只有20 的表現層 核心在資料層...