动态变化类型，标签 Vue js答案

【问题标题】：dynamic change types,lable Vue js动态变化类型，标签 Vue js
【发布时间】：2021-03-31 06:54:26
【问题描述】：

我希望能够在文本和电子邮件、数字之间动态更改输入字段的类型、标签。这怎么可能，我是 vue js 的新手：

<input type="email">

【问题讨论】：

【解决方案1】：

首先你需要在你的数据中声明这个：

data () {
  return {
    inputType: "text",
    lableName: "Default",
  }
}

现在您在 html 中使用这些变量：

<label>{{ lableName }}</label>
<input :type="inputType">

最后一部分是定义这些值发生变化时的逻辑。但是，我不知道您何时或为什么要更改此设置。如果你详细说明我可以编辑。

希望这已经有所帮助:)

【讨论】：

所以我在 data 函数中有一个数组，所以我想为数组输入中的每个索引都有索引名称 data () { return { data: { headers: [ 'Email', 'Name', 'DESC', 'Notes', 'reason' ] 如您所见，当我有标签时，我的数据应更改为 Email , Name, DESC @Wimancesir

【解决方案2】：

您可以使用以下语法使其动态化对于html：

<input :type="inputType">

在数据中：

data () {
  return {
    inputType: 'text'
  };
}

【讨论】：