Vue常用指令及介紹

2021-10-21 15:24:44 字數 2550 閱讀 5976

vue 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。

new

vue(

)

v-show:根據表示式的真假值來顯示和隱藏元素

"vs"

>

"temp"

>如懿傳<

/p>

"ok"

>還珠格格<

/p>

<

/div>

var vs =

newvue(}

) window.

setinterval

(function()

,1000

)<

/script>

v-ifv-else:根據表示式的真假值來動態插入和移除元素

v-showv-ifv-else同為顯示隱藏元素,其區別為:

v-html:插入標籤

v-text:插入文字

v-for:根據條件渲染

"ab"

>

>

v-for

="(item,index) in arr"

>

}:}li

>

ul>

border

="1"

>

>

width

="100px"

>

編號th

>

width

="100px"

>

姓名th

>

width

="100px"

>

年齡th

>

width

="100px"

>

性別th

>

tr>

v-for

="item in tab"

>

>

}td>

>

}td>

>

}td>

>

}td>

tr>

table

>

div>

>

newvue(,

,]}}

)script

>

v-bind:繫結元素,並由相應效果 (簡寫::設定值

'a'>

v-bind:href

="link"

v-bind:class=""

target

="_blank"

>

>

div>

>

newvue(}

)script

>

v-on:繫結函式

"tupian"

>

"" v-on=

"">

<

/div>

newvue(,

methods:

, enter:

function()

}})<

/script>

v-model:是將input的值和變數進行繫結 ——典型的資料雙向繫結

"***"

>

請選擇性別:<

/p>

="male"

>

"radio" value=

"男" id=

"male" v-model=

"gender" name=

"***"

>男<

/label>

="female"

>

"radio" value=

"女" id=

"female" v-model=

"gender" name=

"***"

>女<

/label>

性別:}

<

/p>

<

/div>

newvue(}

)<

/script>

v-once:讓元素或元件值渲染一次,一但繫結,資料就不會改變

v-pre:用於跳過該元素和其子元素的編譯過程。對於大量沒有指令的節點使用該指令,加快編譯速度

v-cloak:指令解決初始化慢導致的頁面閃動

Vue常用指令及使用

指令是以資料去驅動dom行為,簡化dom操作。常用指令如下 v text innertext,不能解析文字中的html標籤 v html innerhtml,可解析文字中的html標籤 v show控制元素的顯示 隱藏 v if v else if v else滿足條件才顯示對應的元素 v for遍...

vue常用指令及原理

1 v if 判斷表示式是否為真,如果為真則插入dom。v show 則是通過控制css樣式來控制是否顯示。如果要顯示的元素中含有,使用 v show 可以在顯示之前提前載入,當值為 true 時就顯示。使用 v if 時會直到顯示時才開始載入。2 v for 指令可以用來遍歷乙個陣列或物件 對於陣...

Vue常用的指令及用法

v if 判斷是否隱藏 list.lenght 0 v if div else v else div v for 資料迴圈 item代表是迴圈的值 index代表是每一項 也可以說是下標 key 代表標識 for item,index in list key index p div v bind c...