資訊專欄INFORMATION COLUMN
摘要：修改的值可以看到元素中增加了，原來的文字也被隱藏了當(dāng)然也可以賦值為其它東西，但是最后都會(huì)轉(zhuǎn)換為布爾值來決定目標(biāo)元素是否顯示。
本期跟大家分享的，是Vue里面除了v-bind和v-on之外的指令。因?yàn)槎纪?jiǎn)單的，所以就一次性解決了。
v-text直接把文字綁定到html。之前我們一直使用大胡子語法往html里面綁定數(shù)據(jù)，如果數(shù)據(jù)是純字符串的話，也可以使用v-text。
當(dāng)然也可以綁定其它類型的數(shù)據(jù)，它們會(huì)以字符串的輸出。
v-html相當(dāng)于jq的html方法，把數(shù)據(jù)中的html字符串嵌入到目標(biāo)元素里面。
注意v-text和v-html兩者，往html里插入數(shù)據(jù)以后新數(shù)據(jù)和使用指令的元素之間的層級(jí)關(guān)系。
v-if/v-else-if/v-else我會(huì)把這三兄弟描述為：在html中進(jìn)行狀態(tài)控制的快捷指令。
下面用一個(gè)簡(jiǎn)單的例子來演示。假設(shè)我們的數(shù)據(jù)中status可能會(huì)返回loading、ready、fail三者之一，在頁面需要根據(jù)這個(gè)字段來顯示不同的東西：
loadingreadyfail
在console中直接改變status值，可以看到效果：
同時(shí)要留意，使用這三兄弟的時(shí)候，vue只會(huì)生成判定為true的那個(gè)節(jié)點(diǎn)：
v-show根據(jù)布爾值決定目標(biāo)元素的css display值。
{{ info }}
修改showHeader的值
> app.showHeader = false
可以看到元素中增加了css style，原來的文字也被隱藏了：
當(dāng)然showHeader也可以賦值為其它東西，但是最后都會(huì)轉(zhuǎn)換為布爾值來決定目標(biāo)元素是否顯示。
v-show和v-if的區(qū)別打開chrome devtools來查看兩者渲染出來的dom。可以看到v-show只改變?cè)氐腸ss，但是v-if會(huì)決定是否生成這個(gè)dom節(jié)點(diǎn)（可查看上方截圖）。
v-once只根據(jù)數(shù)據(jù)渲染一次。往后數(shù)據(jù)改變時(shí)，目標(biāo)元素不再重新渲染。
我們用v-text和v-once進(jìn)行對(duì)比：
v-once: {{ once }}mustache: {{ once }}
保存代碼并刷新瀏覽器后，兩句話是一樣的：
對(duì)數(shù)據(jù)中的once值進(jìn)行修改后，使用v-once的元素不更新：
這期就到這里，敬請(qǐng)期待下一期：v-bind綁定屬性和class。
寫在最后源碼地址：https://github.com/levblanc/v...
視頻攻略：小的不才，為求一贊，自制 本期視頻攻略 在此。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81205.html
摘要：在大家的鞭策和鼓勵(lì)下，這個(gè)基礎(chǔ)的系列終于完成了。關(guān)于更新的頻率，因?yàn)槭俏易约阂粋€(gè)人在做，文案視頻都準(zhǔn)備好了才發(fā)的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因?yàn)楣痉偶倭?。不過月份的更新速度真的不能保證，抱歉。 在大家的鞭策和鼓勵(lì)下，這個(gè)基礎(chǔ)API的系列終于完成了。所幸是沒有真的更到一百期才完結(jié)（笑）。最初是因?yàn)橛X得錄視頻好玩，才挖的這個(gè)坑。也想過中途放棄，關(guān)掉專欄，但由于...
摘要：雙向數(shù)據(jù)綁定這將是全宇宙最簡(jiǎn)單的雙向數(shù)據(jù)綁定示例。這是一個(gè)專門針對(duì)表單的指令。也就是說，上面談到的這幾處地方，它們指向的數(shù)據(jù)源是同一個(gè)。所以，當(dāng)其中一處對(duì)數(shù)據(jù)源進(jìn)行了修改，其它地方也會(huì)馬上得到體現(xiàn)。 雙向數(shù)據(jù)綁定 這將是全宇宙最簡(jiǎn)單的雙向數(shù)據(jù)綁定示例。 上一期我們已經(jīng)成功地通過Vue給html綁定了數(shù)據(jù)，也在console里面看到了數(shù)據(jù)是可以實(shí)時(shí)進(jìn)行更改的。想要實(shí)現(xiàn)在網(wǎng)頁上根據(jù)用戶的輸...
摘要：近日，重構(gòu)項(xiàng)目某一老模塊時(shí)，有一個(gè)功能是生成二維碼并下載，還可以復(fù)制鏈接。先想著新模塊中是否有生成二維碼的插件，看了下。項(xiàng)目中封裝了一個(gè)指令。一份用來顯示的。順帶說一下，復(fù)制粘貼復(fù)制粘貼老模塊中是用的倉(cāng)庫(kù)。 近日，重構(gòu)項(xiàng)目某一老模塊時(shí)，有一個(gè)功能是生成二維碼并下載，還可以復(fù)制鏈接。列表每項(xiàng)都有二維碼、下載二維碼和復(fù)制鏈接和列表上方總的二維碼。老模塊是用的qrocode中文文檔，qrco...
之前在vue里面綁定數(shù)據(jù)，都只是單個(gè)地綁定。這期我們來看一下怎樣渲染列表，然后通過事件監(jiān)聽方法往列表里面增加item。 列表渲染 廢話不多說，直接上代碼： {{ item }} var app = new Vue({ el: #app, data: { list: [ ...
摘要：實(shí)例和組件之間的通信先來看一下我們最后要完成的效果吧。在組件的內(nèi)部監(jiān)聽到用戶的事件后，執(zhí)行自身的方法，把信號(hào)發(fā)布出去。所以可以直接把實(shí)例作為一個(gè)，在組件之間進(jìn)行通信。比方說，我們希望點(diǎn)擊按鈕以后，另外一個(gè)組件可以接收到這個(gè)信號(hào)。 當(dāng)組件監(jiān)聽到用戶的行為，需要觸發(fā)一些界面交互的時(shí)候，實(shí)例與組件之間、組件相互之間就需要進(jìn)行通信了。Vue里面有兩個(gè)api可以幫助我們輕松地完成這件事，它們是$...
閱讀 2025·2021-11-15 11:38
閱讀 2058·2019-08-30 15:55
閱讀 2192·2019-08-30 15:52
閱讀 3177·2019-08-30 14:01
閱讀 2693·2019-08-30 12:47
閱讀 1160·2019-08-29 13:17
閱讀 1072·2019-08-26 13:55
閱讀 2640·2019-08-26 13:46
