Dynamisch kenmerk toevoegen in VueJs

Ik gebruik vuejs en ik wil weten hoe ik controle over invoer kan hebben (voeg indien nodig uitgeschakeld kenmerk toe). Is er een manier om dynamisch attribuut toe te voegen in vuejs? Onder mijn Textfield component:

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

Gebruik:

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

Antwoord 1, autoriteit 100%

Je kunt het aan een variabele binden met behulp van v-bind:disabled="foo"of :disabled="foo"in het kort:

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

Dan kun je in Vue gewoon this.myVar = trueinstellen en het zal de invoer uitschakelen.

Bewerken: voeg dit toe aan je sjabloon:

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

Antwoord 2, autoriteit 9%

Zoals aangegeven, heeft u in uw geval geen dynamische attributen nodig.

Maar goed, je hebt gevraagd of het mogelijk is, en het antwoord is ja. U kunt vanaf 2.6.0 dynamische attributen hebben.

Voorbeeld:

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

Het is hier

gedocumenteerd

Antwoord 3, autoriteit 7%

een basisvoorwaarde die we in vue kunnen definiëren of wijzigen

Raadpleeg het officiële document voor dezelfde https://vuejs.org/v2/guide /syntax.html#Attributen

Antwoord 4, autoriteit 7%

Ik probeer erachter te komen hoe ik het attribuut van de html-tags van de array-waarde dynamisch kan instellen bij gebruik van de Vue v-for-lus.

Wat ik ga laten zien:

Voorbeeld

1. Er zijn 3 div-elementen met verschillende achtergrondkleuren van arraywaarde (niet statisch).

2. Elke div heeft een invoertag en verandert de waarde wanneer de gebruiker de invoerwaarde heeft

   • De invoer van de eerste div zet kleine letters om in hoofdletters.
   • seconde vertegenwoordigt de stemming, indien ‘gelukkig’ invoert, presenteer ‘goed’. als u ‘sad’ invoert, voert u ‘slecht’ uit
   • De derde div-invoer verdubbelt de invoerwaarde.

   {{ box.outputData }}
   Afgeronde doos

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

Antwoord 5

ok, probeer dit als je i18 passeert – **

:placeholder=”$t(‘languagePlaceholder’)”

**

Antwoord 6

Ik deed dat met selectievakjes:

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

mijn scripts

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