如何在VueJs中动态添加属性

问题描述 投票:0回答:8

我正在使用 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>
javascript vue.js dynamic vue-component
8个回答
81
投票

您可以使用

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>

25
投票

正如所指出的,您的案例中不需要动态属性。

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

示例:

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

记录在这里


5
投票

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

我要展示的内容:

示例

  1. 有 3 个 div 元素,其背景颜色与数组值不同(不是静态的)。
  2. 每个div都有一个input标签,当用户输入值时改变值

    • 第一个div的输入将小写转换为大写。
    • 第二个代表心情,如果输入“高兴”,则表示“好”。如果输入“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;
    }
    

3
投票

我们可以在 vue 中定义或更改属性的基本条件

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


2
投票

好的,如果你通过了 i18,试试这个 -

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


0
投票

我用复选框做到了:

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

0
投票

Vue3 错误示例:

BaseInput.vue

<template>
    <div>
        <label>{{ label }}</label>
        <input v-bind="$attrs" :placeholder="label" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
        <p v-if="error">{{ error }}</p>
    </div>
</template>

<script setup>
defineProps(['label', 'modelValue', 'error'])
defineEmits(['update:modelValue'])
</script>

v-bind="$attrs"
如果你想传递属性给子标签或者
<template>
中有多个标签你可以指定需要获取属性的标签。

登录.vue

<template>
    <form @focusout="validateForm" @submit.prevent="onSubmit">
        <BaseTitle title="Log in" h="h1"/>
        <BaseInput type="email" v-model="email" label="Email" :error="emailError"/>
        <BaseInput type="password" v-model="password" label="Password" :error="passwordError"/>
        <BaseButton type="submit" label="LogIn" />
    </form>
</template>

<script setup lang="ts">

const email = ref('')
const password = ref('')
const emailError = ref('')
const passwordError = ref('')

function validateForm() {
    emailError.value = "Error"
}

function onSubmit() {
    signIn({ email: email.value, password: password.value})
}
</script>

0
投票

要设置名称为动态的属性(例如变量),可以使用方括号将动态参数传递给

v-bind

<div :[attrName]="attrValue">Content...</div>

这是

v-bind:[attrName]="attrValue"
的简写。

参见 Vue SFC Playground 示例

© www.soinside.com 2019 - 2024. All rights reserved.