在 HTML 中传递布尔 Vue 道具值
[英] Passing boolean Vue prop value in HTML
本文介绍了在 HTML 中传递布尔 Vue 道具值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 Vue 的新手，并且已经开始使用 vue-cli 的项目.
我正在研究基于从父级发送的道具的条件渲染.
Home.vue (父级)
<Header have-banner="true" page-title="Home"></标题><脚本>从./Header"导入标题；导出默认{组件: {标题，},name: "家",数据() {返回 {标题:你好 Vue！",};},};
Header.vue (子)
<标题><div v-if="haveBanner == 'true'">...
...</标题>
我研究了另一种传统方式实现这一点，但 vue-cli 以不同的方式呈现模板.
在 HTML 标记中传递道具时，道具 haveBanner 计算为字符串，因此，即使我这样做了:
父母
孩子
...
那个 <div> 仍然会显示，因此，我必须做一个明确的检查，看看它的计算结果是否为 'true'.由于类型强制可能存在问题，我不喜欢这个，并且我在类型检查 (===) 中抛出警告说:
<块引用>
二元运算参数类型字符串与类型字符串不兼容
有没有办法让孩子将这个 prop 评估为布尔值，或者让父级在标记中将其作为布尔值传递?
解决方案
如果传入 JS 关键字如布尔值或变量引用，则需要使用 v-bind(或:)，即:
这将具有将布尔值 true 绑定到 prop 的效果，而不是 true" 字符串.如果您没有使用 v-bind，haveBanner 道具将总是 为真，因为它是一个非零长度的字符串，无论如果您将 "true" 或 "false" 分配给它.
友情提示:HTML 标签不区分大小写，因此您可能需要使用 custom-header 或 my-header-component 而不是 Header:
查看概念验证:
Vue.component('custom-header', {模板:'#customHeader'，道具: {haveBanner:布尔值，页面标题:字符串}});新的 Vue({el: '#app'});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script><div id="应用程序"><custom-header v-bind:have-banner="true" page-title="Home"></custom-header><custom-header v-bind:have-banner="false" page-title="Home"></custom-header>
<script type="text/x-template" id="customHeader"><标题><div v-if="haveBanner"><code>haveBanner</code>是真的！
<div v-else><code>haveBanner</code>是假的！
</标题></script>
专业提示:使用 : 简写使您的模板更具可读性，即:
I am fairly new to Vue and have started with a project with vue-cli.
I am looking into conditional rendering based on a prop sent from parent.
Home.vue (parent)
<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 (child)
<template>
<header>
<div v-if="haveBanner == 'true'">
...
</div>
...
</header>
</template>
I have looked at another conventional way to achieve this but vue-cli renders templates differently.
As passing the prop in the HTML markup, the prop haveBanner evaluates as a string and, therefore, even if I did:
Parent
<Header have-banner="false"></Header>
Child
<div v-if="haveBanner"`>
...
</div>
That <div> would still display and, because of this, I am having to do an explicit check to see if it evaluates to 'true'. I am not a fan of this due to possible issues with type coercion and I am thrown a warning with a type check (===) saying:
Binary operation argument type string is not compatible with type string
Is there a way to for either the child to evaluate this prop as a boolean or for the parent to pass it as a boolean in the markup?
解决方案
If passing in JS keywords such as boolean values or references to variables, you will need to use v-bind (or :), i.e.:
<Header v-bind:have-banner="true" page-title="Home">
This will have the effect of binding the boolean true to the prop, not a "true" string. If you are not using v-bind, the haveBanner prop will always be truthy because it is a string of non-zero length, no matter if you assign "true" or "false" to it.
Friendly hint: HTML tags are not case-sensitive, so you might want to use custom-header or my-header-component instead of Header:
<custom-header v-bind:have-banner="true" page-title="Home">
See proof-of-concept:
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>
Pro tip: Use : shorthands to make your template more readable, i.e.:
<custom-header :have-banner="true" page-title="Home">
这篇关于在 HTML 中传递布尔 Vue 道具值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
