如何添加多個屬性 - 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;
    }
  }
}