如何添加多個屬性 - vue.js

這工作：如何添加多個屬性 - vue.js

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

來源

2017-10-14 Syed

不知道我的理解 - U希望將一齊在單個對象的屬性通過？ – LiranC

@LiranC是的，就這麼簡單，只需將屬性分組並應用於元素。 – Syed

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

來源

2017-10-14 08:29:37 LiranC

感謝您的幫助:)以下是我所做的：以下是我所稱的窗體： '' 這裏是我的模板： ' ' 該腳本看起來像現在按照你的建議，這是行得通的:) 'props：{isReadOnly：{default：false，type：Boolean}}， computed：{readOnlyAttributes（）{return {readonly：this.isReadOnly，disabled：this.isReOOly} }} – Syed

如何添加多個屬性 - vue.js

回答

相關問題