如何添加多个属性 - 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是你的朋友。 因为您希望计算属性，所以每次对isReadOnly值进行更改时，我都会创建一个计算方法来构建对象。

如果要静态绑定属性组，可以使用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;
    }
  }
}