如何在 VueJs 中动态添加属性

Question

我正在使用 vuejs，我想知道如何控制输入（必要时添加禁用属性）。有没有办法在 vuejs 中动态添加属性？在我的 Textfield 组件 下方：

    <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>

Answer 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>

Answer 2

基于一个条件，我们可以在 vue 中定义或更改属性

同上请参考官方文档https://vuejs.org/v2/guide/syntax.html#Attributes

Answer 3

我想弄清楚如何在使用 Vue v-for 循环时从数组值动态设置 html 标签的属性。

我要展示的内容：

Example

有 3 个 div 元素具有与数组值（非静态）不同的背景颜色。

每个div都有一个input标签，当用户输入值时改变值

第一个 div 的输入将小写字母转换为大写字母。
秒代表心情，如果进入'happy'，现在'good'。如果输入 'sad'，输出 'bad'
第三个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;
}

Answer 4

如前所述，您的情况不需要动态属性。

但是好吧，你问是否可能，答案是肯定的。从 2.6.0 开始，您可以拥有动态属性。

示例：

<a v-bind:[attributeName]="whatever">

有记录here

Answer 5

好的，如果你通过 i18，试试这个 - **

:placeholder="$t('languagePlaceholder')"

**

Answer 6

我用复选框做到了：

 <select id="newTwootType" v-model="state.selectedTwootType">
      <option 
      :value="option.value" 
      v-for="(option, index) in state.twootTypes" 
      :key="index">
        {{ option.name }}
      </option>
    </select>

我的脚本

export default {
name: 'CreateNewTwootPanel',
setup(props, ctx) {
  const state = reactive({  
      selectedTwootType: 'instant',
      twootTypes: [
          { value: 'draft', name: 'Draft' },
          { value: 'instant', name: 'Instant Twoot' }
      ],
  })

  return {
    state,
    }
  }
}

如何在 VueJs 中动态添加属性

How to add dynamically attribute in VueJs

javascript

dynamic

vue.js

vue-component