Vue.js 将 Boolean 值传递给组件属性

Question

我想在 Vue 中创建一个简单的输入组件，
如果IsPassword条件为真，则设置其type="password" ，如果不是，则将其设置为type="text" 。
我可能在语法的某个地方犯了错误，因为我正在parsing javascript error

这是我的代码的简化版本
App.vue

import InputText from "@/components/InputText.vue";

<template>
Username : <InputText/>
Password : <InputText :isPassword="true">
</template>

输入文本.vue

<template>
<input :type="{IsPassword ? 'password':'text'}" value="Im getting error here"> 
</template>
<script>
export default {
    props: {
        IsPassword: Boolean
    }
}
</script>

Answer 1

首先，您应该在大括号中设置条件。

第二，三元运算符的语法应该是什么样子的condition? if condition true: if condition false condition? if condition true: if condition false

所以，它应该看起来像

<input :type="IsPassword ? 'password' : 'text'" value="Im getting error here"> 

Answer 2

您可能需要支持输入文本的特征类型。

我的建议是将逻辑保留在模板之外：

import InputText from "@/components/InputText.vue";

<template>
Username : <InputText/>
Password : <InputText is-password>
</template>

<template>
   <input :type="inputType" > 
</template>

<script>
import {computed} from 'vue';

export default {
    props: {
        IsPassword: Boolean
    },
    setup(props){
       const inputType = computed(() => props.IsPassword ? 'password' : 'text')

      return{
         inputType
      }
    }

}
</script>