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