web-dev-qa-db-ja.com

VueJに属性を動的に追加する方法

私は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>
javascriptvue.jsdynamicvue-component
33
Maria Minh

略して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>
37
Jeff

Vue v-forループを使用するときに、配列値からHTMLタグの属性を動的に設定する方法を見つけようとしています。

私が見せようとしているもの：

例

  1. 配列値（静的ではない）とは異なる背景色を持つ3つのdiv要素があります。

  2. 各divには入力タグがあり、ユーザーが値を入力すると値を変更します

    • 最初のdivの入力は、小文字を大文字に変換します。
    • 2番目は気分を表し、「幸せ」と入力すると「良い」と表示されます。 「sad」と入力すると、「bad」が出力されます
    • 3番目のdiv入力は、入力値を2倍にします。
    {{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;
}
1
Black Horse

vueで属性を定義または変更できる基本条件

同じことについては公式ドキュメントを参照してください https://vuejs.org/v2/guide/syntax.html#Attributes

0
Pankaj Rupapara