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，因为该属性的值将被评估为字符串而不是布尔表示，例如：

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

......或者如果你对短发者更加满意：

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

见下面的概念验证：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

当您实际想要将其作为布尔值传递时，您将i=0 while i<1: try: driver.find_element_by_xpath('//*[@title="xml (Open in a new window)"]').click() except: i=1 #Once the download link is clicked this has to fill the form for submission which fill download the file class FormPage(object): def fill_form(self, data): driver.find_element_by_xpath('//input[@type = "radio" and @value = "Non-commercial"]').click() driver.find_element_by_xpath('//input[@type = "checkbox" and @value = "R&D"]').click() driver.find_element_by_xpath('//input[@name = "name_d"]').send_keys(data['name_d']) driver.find_element_by_xpath('//input[@name = "mail_d"]').send_keys(data['mail_d']) return self def submit(self): driver.find_element_by_xpath('//input[@value = "Submit"]').click() data = { 'name_d': 'abc', 'mail_d': 'xyz@gmail.com', } FormPage().fill_form(data).submit() driver.quit()属性作为字符串传递。而不是show-me写show-me="..."（或v-bind:show-me="..."）。然后:show-me="..."内的所有内容都将被解释为Javascript而不是字符串。

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

v-如果不按预期行事

2 个答案: