v-如果行爲不如預期

Question

我有一個Vue組件，我希望有時出現在一個位置，有時位於另一個位置。所以我給它一個屬性，我在模板根目錄的v-if指令中測試。我在我的標記中有兩個自定義標記，並假設我將獲得兩個不同的組件實例。令我驚訝的是，即使其中一個屬性爲false，該組件也會呈現兩次。這裏發生了什麼？

標記

<div id='vueRoot'> 
    <now-you-see-me show-me='true'></now-you-see-me> 
    <now-you-see-me show-me='false'></now-you-see-me> 
</div> 

JS

Vue.component('now-you-see-me',{ 
    template : `<div v-if='showMe'>I only want ONE **{{showMe}}**</div`, 
    props : ['showMe'] 
}) 
vm = new Vue({ 
    el : '#vueRoot' 
}) 

running here

Answer 1

對於true和false綁定，你必須使用v-bind:show-me，而不是隻是show-me，因爲屬性的值將作爲另有一個字符串，而不是一個布爾exprsesion，如進行評估：

<now-you-see-me v-bind:show-me='true'></now-you-see-me> 

...或者，如果你更舒適的速記：

<now-you-see-me :show-me='true'></now-you-see-me> 

見證明下面-of-概念：

Vue.component('now-you-see-me',{ 
 
    template : `<div v-if='showMe'>I only want ONE **{{showMe}}**</div>`, 
 
    props : ['showMe'] 
 
}) 
 
vm = new Vue({ 
 
    el : '#vueRoot' 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 

 
<div id='vueRoot'> 
 
    <now-you-see-me :show-me='true'></now-you-see-me> 
 
    <now-you-see-me :show-me='false'></now-you-see-me> 
 
</div>

Answer 2

當您實際想要將它作爲布爾值傳遞時，您正在將show-me屬性作爲字符串傳遞。而不是show-me="..."寫v-bind:show-me="..."（或:show-me="..."）。 "中的所有內容都將被解釋爲Javascript而不是字符串。

https://jsfiddle.net/aw3bup8u/1/