Vue常見指令有哪些

本篇內(nèi)容介紹了“Vue常見指令有哪些”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、指令的定義

在我們逐一學(xué)習(xí)Vue常見指令之前，我們首先要明白，什么是指令？簡單概括起來，指令是帶有v-前綴的特殊屬性。例如v-model，代表雙向綁定。

2、插值表達(dá)式

（1）花括號

格式是：{{表達(dá)式}}

該表達(dá)式支持JS語法，可以調(diào)用js內(nèi)置函數(shù)（必須有返回值）；表達(dá)式必須有返回結(jié)果。例如 1 + 1，沒有結(jié)果的表達(dá)式不允許使用，如：var a = 1 + 1?？梢灾苯荧@取Vue實(shí)例中定義的數(shù)據(jù)或函數(shù)。

例子：

（2）插值閃爍

使用{{}}方式在網(wǎng)速較慢時會出現(xiàn)問題。在數(shù)據(jù)未加載完成時，頁面會顯示出原始的{{}} ，加載完畢后才顯示正確數(shù)據(jù)，稱為插值閃爍。

（3）v-text和v-html

使用v-text和v-html指令來替代{{}}。v-text：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有HTML代碼，會作為普通文本輸出。v-html：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有HTML代碼，會被渲染。改造原頁面內(nèi)容為：

效果：

并且不會出現(xiàn)插值閃爍，當(dāng)沒有數(shù)據(jù)時，會顯示空白。

3、Vue常見指令

（1）v-model

v-model是雙向綁定，視圖（View）和模型（Model）之間會互相影響。既然是雙向綁定，一定是在視圖中可以修改數(shù)據(jù)，這樣就限定了視圖的元素類型。目前v-model的可使用元素有：input、select、Textarea、checkbox、radio、components?；旧铣俗詈笠豁?xiàng)，其它都是表單的輸入項(xiàng)。

示例：

多個checkbox 對應(yīng)一個model時，model的類型是一個數(shù)組，單個checkbox值是boolean類型；radio對應(yīng)的值是input的value值；input 和textarea 默認(rèn)對應(yīng)的model是字符串；select 單選對應(yīng)字符串，多選對應(yīng)也是數(shù)組。

（2）v-on

v-on指令用于給頁面元素綁定事件。語法是：v-on:事件名="js片段或函數(shù)名"。簡寫語法：@事件名="js片段或函數(shù)名"。例如 v-on:click='add' 可以簡寫為@click='add'

示例：

（3）v-for

遍歷數(shù)據(jù)渲染頁面是非常常用的需求，Vue中通過v-for指令來實(shí)現(xiàn)。語法：v- for="item in items"。items：要遍歷的數(shù)組，需要在vue的data中定義好；item：循環(huán)變量。在遍歷的過程中，如果需要知道數(shù)組角標(biāo)，可以指定第二個參數(shù)。語法是：v-for="(item,1 index) in items"。v-for除了可以迭代數(shù)組，也可以迭代對象。語法基本類似：

v-for="value in object"

v-for="(value,key) in object"

v-for="(value,key,index) in object"

（4）v-if

-if，顧名思義，條件判斷。當(dāng)?shù)玫浇Y(jié)果為true時，所在的元素才會被渲染。語法：v-if="布爾表達(dá)式"。示例：

“Vue常見指令有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！