Как добавить динамический атрибут в VueJs

Я использую vuejs, и я хочу знать, как иметь контроль над входами (при необходимости добавьте отключенный атрибут). Есть ли способ добавить динамический атрибут в vuejs? Ниже моего компонента текстового поля:

    <template>
     <input type="text" placeholder="{{ placeholder }}" v-model="value">
    </template>
    <script>
    export default  {
      props: {
       disabled: {type: Boolean, default: false},
       placeholder: {type: String, default: ""},
       value: {twoWay: true, default: ""}
      }
     }
    </script>

Использование:

<textfield placeholder="Name" value.sync="el.name" :disabled="true"></textfield>

Ответы

Ответ 1

Вы можете привязать его к переменной с помощью v-bind:disabled="foo" или :disabled="foo" для краткости:

<textfield label="Name" value.sync="el.name" :disabled="myVar">

Затем в Vue вы можете просто установить this.myVar = true, и он отключит ввод.

Изменить: добавьте это в свой шаблон:

<template>
  <input type="text" :disabled="disabled" placeholder="{{ placeholder }}" v-model="value">
</template>

Ответ 2

Исходя из одного условия мы можем определить или изменить атрибуты в VUE

Пожалуйста, обратитесь к официальному документу для того же https://vuejs.org/v2/guide/syntax.html#Attributes

Ответ 3

Я пытаюсь выяснить, как динамически установить атрибут тегов html из значения массива при использовании цикла Vue v-for.

Что я собираюсь показать:

пример

  1. Есть 3 элемента div с разными цветами фона от значения массива (не статично).

  2. Каждый div имеет тег ввода и меняет значение, когда пользователь вводит значение

    • Первый вход div преобразует строчные буквы в прописные.
    • секунда представляет настроение, если ввести "счастливый", настоящий "хороший". если ввести "грустно", вывести "плохо"
    • Третий вход div удваивает входное значение.
    {{box.outputData}} Округлая коробка 
    new Vue({
 el: "#app",
  data: {
    isRounded: false,
      boxes: [
        {
          inputData: "",
          outputData: "",
          color: "green",
          operation: "uppercase"
        },
        {
          inputData: "",
          outputData: "",
          color: "red",
          operation: "feeling"
        },
        {
          inputData: "",
          outputData: "",
          color: "blue",
          operation: "multiple"
        }
      ],
      feeling: {
        good: ["happy", "joyful", "calm"],
        bad: ["sad", "mad", "depressed"]
      }
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  },
  watch: {
    boxes: {
      deep: true,
      immediate: true,
      handler: function(val) {
        this.boxes.map(box => {
          if (box.operation === "uppercase")
            box.outputData = box.inputData.toUpperCase();
          else if (box.operation === "feeling") {
            box.outputData = this.feeling.good.includes(box.inputData)
              ? "GOOD"
              : this.feeling.bad.includes(box.inputData)
              ? "BAD"
              : "";
          } else if (box.operation === "multiple") {
            if (box.inputData == "") box.outputData = "";
            else box.outputData = parseInt(box.inputData) * 2;
          }
        });
      }
    }
  },
  mounted() {
    for (var i = 0; i < this.numBox; i++) {
      this.boxValue[i] = "";
      this.bxData[i] = "";
    }
  },
})



.clearfix{
 clear: both;
}
.full-width{
  width:100%;
}
input {
  background: transparent;
  text-decoration: underline;
  color: white;
  border: none;
  text-align: center;
  font-size:30px;
}
.box {
  float:left;
  color: white;
  width: 24%;
  margin-right: 1%;
  padding: 20px;
  background: blue;
  height: 100px;
}
.box-output {
  width: 100%;
  text-align: center;
  font-size:30px;
}
.box-rounded {
  border-radius: 50px;
}