vue中props參數(shù)是布爾類型的爬坑

平常vue的props的參數(shù)類型,我使用的時候是字符串啊,數(shù)字啊啥的居多玄柠,今天因為需要通過傳參控制某些內(nèi)容的隱藏顯示,于是乎诫舅,用到了布爾值的參數(shù),但是每想到這個布爾值的參數(shù)給我坑了好久宫患。

首先我按照基本的操作刊懈,對這個參數(shù)進行了設置


那,就這么個簡單的玩意


使用v-show加上這個參數(shù)控制顯示隱藏

然后我開始在要傳參的標簽上傳參了,因為要隱藏嘛虚汛,所以當然是false了匾浪,于是按照慣常想法,首先傳入字符串false


傳入"false"卷哩,不起效果

蛋辈,完全沒有一點效果,并沒有隱藏将谊。轉(zhuǎn)個角度冷溶,難道是因為他會將字符串中的內(nèi)容轉(zhuǎn)換成布爾值之后再來判斷?

我這“false"被判斷成了true了尊浓?如果是這樣的話逞频,那就得使用空字符串了,于是栋齿,空字符傳走起苗胀,悲催的是還是沒有起效果,仍舊沒有隱藏掉


傳入空字符串瓦堵,還是沒有效果

這讓我有點疑惑了基协,咋滴?難道傳字符串都不對菇用?果然打開控制臺澜驮,看到了報錯,發(fā)現(xiàn)這個跟我想象的不一樣刨疼,根本不會將字符串轉(zhuǎn)化成布爾值的形式再判斷泉唁,對了,這個參數(shù)設置類型本來就是進行參數(shù)校驗的嘛揩慕,能轉(zhuǎn)化的話起什么校驗作用亭畜?!

哎呦我這腦袋啊迎卤,這波坑完全是自己跳進去的了拴鸵,哎。蜗搔。劲藐。。樟凄。聘芜。

就在自我反省的時候,突然想起來有的時候這種參數(shù)不寫的話缝龄,貌似會被認為是false汰现,于是乎挂谍,第三波走起,我不傳這個參數(shù)了


干脆不寫參數(shù)瞎饲,嗚嗚嗚口叙,還是不起效果

這咋還是沒有效果,不應該啊嗅战,這真的讓我有點徹底崩潰了妄田。

哎,沒辦法驮捍,只能官網(wǎng)走起了疟呐,沒有什么是官網(wǎng)解決不了,如果解決不了厌漂,就看第二遍

終于在官網(wǎng)的Prop — Vue.js? 一節(jié)里找到了答案萨醒,官網(wǎng)對于props參數(shù)是布爾類型的驗證規(guī)則如下:


官網(wǎng)驗證props為布爾值的規(guī)則

上面的規(guī)則中說,包含參數(shù)沒有值的情況下苇倡,都會被認為是true富纸,所以我之前的干脆不寫都被認成了true,因此沒有起效果旨椒。如果想要將參數(shù)值變成布爾值的false晓褪,就要使用上面第二條中的動態(tài)綁定方法,通過v-bind告訴vue這是一個表達式综慎,不是字符串涣仿,于是乎,按照這個思路走起來示惊,只要把我的參數(shù)改寫成下面這種形式應該就可以了


前面加上冒號

試了一下好港,果然起了效果,該隱藏的部分隱藏掉了米罚。

以為這樣就結(jié)束了嗎钧汹?當然不是,還記得我最開始的給這個參數(shù)設置的默認值嗎录择?是true拔莱,既然true是這樣的結(jié)果,我就想知道如果false隘竭,是不是也是這樣塘秦,于是第二波測試走起。首先將原來的默認值改掉


將默認值改成false

除了上面使用v-bind的方式經(jīng)過驗證也可以正扯矗控制之外尊剔,我還試了一下直接加上這個參數(shù)和不寫這個參數(shù)的形式,即


不寫該參數(shù)


寫上該參數(shù)

發(fā)現(xiàn)這種方式也可以起到控制的作用菱皆,寫的時候须误,被認為是true笔咽,不寫的時候被認為是false,哈哈哈霹期,是跟默認值為true的時候不一樣的效果哦!

綜上所述:

無論默認值為true還是false,都可以通過v-bind進行值的傳參拯田,v-bind綁定為true历造,就是true,綁定false就是false

如果默認值為false的情況下船庇,也可以通過是否寫該參數(shù)控制吭产,寫上參數(shù)就是true,不寫就是false鸭轮,但是默認值為true的時候不可以

爬坑圓滿結(jié)束3加佟!窃爷!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末邑蒋,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子按厘,更是在濱河造成了極大的恐慌医吊,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,640評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件逮京,死亡現(xiàn)場離奇詭異卿堂,居然都是意外死亡,警方通過查閱死者的電腦和手機懒棉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評論 3 395
  • 文/潘曉璐 我一進店門草描,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人策严,你說我怎么就攤上這事穗慕。” “怎么了享钞?”我有些...
    開封第一講書人閱讀 165,011評論 0 355
  • 文/不壞的土叔 我叫張陵揍诽,是天一觀的道長。 經(jīng)常有香客問我栗竖,道長暑脆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,755評論 1 294
  • 正文 為了忘掉前任狐肢,我火速辦了婚禮添吗,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘份名。我一直安慰自己碟联,他們只是感情好妓美,可當我...
    茶點故事閱讀 67,774評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鲤孵,像睡著了一般壶栋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上普监,一...
    開封第一講書人閱讀 51,610評論 1 305
  • 那天贵试,我揣著相機與錄音,去河邊找鬼凯正。 笑死毙玻,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的廊散。 我是一名探鬼主播桑滩,決...
    沈念sama閱讀 40,352評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼允睹!你這毒婦竟也來了运准?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,257評論 0 276
  • 序言:老撾萬榮一對情侶失蹤擂找,失蹤者是張志新(化名)和其女友劉穎戳吝,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體贯涎,經(jīng)...
    沈念sama閱讀 45,717評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡听哭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,894評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了塘雳。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陆盘。...
    茶點故事閱讀 40,021評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖败明,靈堂內(nèi)的尸體忽然破棺而出隘马,到底是詐尸還是另有隱情,我是刑警寧澤妻顶,帶...
    沈念sama閱讀 35,735評論 5 346
  • 正文 年R本政府宣布酸员,位于F島的核電站,受9級特大地震影響讳嘱,放射性物質(zhì)發(fā)生泄漏幔嗦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,354評論 3 330
  • 文/蒙蒙 一沥潭、第九天 我趴在偏房一處隱蔽的房頂上張望邀泉。 院中可真熱鬧,春花似錦、人聲如沸汇恤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽因谎。三九已至基括,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間财岔,已是汗流浹背阱穗。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留使鹅,地道東北人。 一個月前我還...
    沈念sama閱讀 48,224評論 3 371
  • 正文 我出身青樓昌抠,卻偏偏與公主長得像患朱,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子炊苫,可洞房花燭夜當晚...
    茶點故事閱讀 44,974評論 2 355

推薦閱讀更多精彩內(nèi)容

  • ??引用類型的值(對象)是引用類型的一個實例侨艾。 ??在 ECMAscript 中执虹,引用類型是一種數(shù)據(jù)結(jié)構(gòu),用于將數(shù)...
    霜天曉閱讀 1,057評論 0 1
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,237評論 0 4
  • 官網(wǎng) 中文版本 好的網(wǎng)站 Content-type: text/htmlBASH Section: User ...
    不排版閱讀 4,383評論 0 5
  • 函數(shù)和對象 1唠梨、函數(shù) 1.1 函數(shù)概述 函數(shù)對于任何一門語言來說都是核心的概念袋励。通過函數(shù)可以封裝任意多條語句,而且...
    道無虛閱讀 4,564評論 0 5
  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,208評論 0 3