javascript - 如何添加多个属性 - vue.js

Question

这个有效:

<input v-model="project.name" :readonly="isReadOnly" :disabled="isReadOnly">

有没有办法让下面的代码工作？

<input v-model="project.name" {{ readOnlyAttr }} >
<input v-model="project.name" {{ isReadOnly : 'readonly disabled' ? ''}}>

脚本如下:

<script>
  export default {
    props: {
      isReadOnly: {
        default: ture,
        type: Boolean
      }
    },
    data () {
      return {
        readOnlyAttr: 'readonly disabled'
      }
    }
  }
</script>

Answer 1

v-bind 是你的 friend 。 因为您希望计算属性，所以我创建了一个计算方法来在每次 isReadOnly 值发生更改时构建对象。

当你想静态绑定(bind)一组属性时，你可以使用data方法。

<template>
  <div>
    <input v-model="project.name" v-bind="readOnlyAttributes">
  </div>
</template>
<script>

export default {
  name: 'example',
  computed: {
    readOnlyAttributes() {
      return {
        readonly: this.isReadOnly,
        disabled: this.isReadOnly ? 'readonly' : ''
      }
    },
    isReadOnly() {
      // returning always true for the example
      return true;
    }
  }
}