javascript - 如何在 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

As pointed out, you don't need dynamic attributes in your case.

But well, you asked if it is possible, and the answer is yes. You can have dynamic attributes, as of 2.6.0.

Example:

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

It is documented here

Answer 3

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

我要展示的内容：

例子

1. 数组值中有 3 个具有不同背景颜色的 div 元素（不是静态的）。

2. 每个 div 都有一个输入标签，并在用户输入值时更改值

   • 第一个 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

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

请参考官方文档以获取相同的https://vuejs.org/v2/guide/syntax.html#Attributes

Answer 5

我用复选框做到了：

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

Answer 6

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

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

**