html - 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 绑定(bind)，您必须使用 v-bind:show-me 而不仅仅是 show-me ，因为属性的值将被评估为字符串而不是 bool 表达式，例如:

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

...或者如果您更习惯使用简写:

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

请参阅下面的概念验证:

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>