在 HTML 中传递布尔 Vue 属性值

Posted 2023-02-23

【中文标题】在 HTML 中传递布尔 Vue 属性值

【英文标题】：Passing boolean Vue prop value in HTML

【发布时间】：2018-08-19 20:51:58

【问题描述】：

我对 Vue 还很陌生，并开始使用 vue-cli 进行项目。

我正在研究基于父级发送的道具的条件渲染。

Home.vue （父级）

<template>
    <Header have-banner="true" page-title="Home">

    </Header>
</template>

<script>
    import Header from "./Header";

    export default 
        components: 
            Header,
        ,
        name: "Home",
        data() 
            return 
                header: "Hello Vue!",
            ;
        ,
    ;
</script>

Header.vue （子）

<template>
    <header>
        <div v-if="haveBanner == 'true'">
            ...
        </div>
            ...
    </header>
</template>

我查看了另一种 conventional 方法来实现这一点，但 vue-cli 呈现模板的方式不同。

在 html 标记中传递道具时，道具 haveBanner 评估为字符串，因此，即使我这样做了：

父母

<Header have-banner="false"></Header>

孩子

<div v-if="haveBanner"`>
    ...
</div>

<div> 仍会显示，因此，我必须进行显式检查以查看其计算结果是否为 'true'。由于类型强制可能存在问题，我不喜欢这个，并且我收到了类型检查 (===) 的警告：

二进制操作参数类型字符串与类型字符串不兼容

有没有办法让孩子将此道具评估为布尔值，或者让父母在标记中将其作为布尔值传递？

【参考方案1】：

如果传入布尔值或变量引用等JS关键字，则需要使用v-bind（或:），即：

<Header v-bind:have-banner="true" page-title="Home">

这将具有将布尔值true 绑定到道具的效果，而不是"true" 字符串。如果您不使用v-bind，则haveBanner 属性将始终为真，因为它是一个非零长度的字符串，无论您分配"true" 还是"false" 给它.

友情提示：HTML 标签不区分大小写，因此您可能希望使用custom-header 或my-header-component 而不是Header：

<custom-header v-bind:have-banner="true" page-title="Home">

查看概念验证：

Vue.component('custom-header', 
  template: '#customHeader',
  props: 
    haveBanner: Boolean,
    pageTitle: String
  
);

new Vue(
  el: '#app'
);

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

<div id="app">
  <custom-header v-bind:have-banner="true" page-title="Home"></custom-header>
  <custom-header v-bind:have-banner="false" page-title="Home"></custom-header>
</div>
 
<script type="text/x-template" id="customHeader">
    <header>
        <div v-if="haveBanner">
          <code>haveBanner</code> is true!
        </div>
        <div v-else>
          <code>haveBanner</code> is false!
        </div>
    </header>
</script>

专业提示：使用: 简写使您的模板更具可读性，即：

<custom-header :have-banner="true" page-title="Home">

【讨论】：

谢谢！我知道在孩子身上使用v-bind，但不知道在父母身上使用它

@Terry 很好的答案。

【参考方案2】：

要将布尔类型用作道具，您必须使用 v:bind

<Header v-bind:have-banner="true" page-title="Home">

//or using a short syntax

<Header :have-banner="true" page-title="Home">