在Vue中,組件是由小到大構建復雜頁面的基本單位。每個組件都有自己的數據對象,稱為Vue對象。Vue對象可以包含多個屬性,也可以有嵌套的對象。
var vm = new Vue({ data: { message: 'Hello', user: { name: 'John', age: 30 } } })
在上面的代碼中,Vue對象包含了兩個屬性:message和user。其中,user是一個嵌套的對象,它有兩個屬性:name和age。我們可以通過以下方式訪問這兩個屬性:
vm.message // 'Hello' vm.user.name // 'John' vm.user.age // 30
當我們使用Vue的模板語法時,可以直接在模板中引用Vue對象和它的屬性。例如:
<div> {{ message }} // 'Hello' <span>{{ user.name }}</span> // 'John' <span>{{ user.age }}</span> // 30 </div>
除了嵌套對象,我們還可以在Vue對象中使用數組。數組既可以直接包含數據,也可以包含嵌套的對象。
var vm = new Vue({ data: { items: [1, 2, 3], users: [ { name: 'John', age: 30 }, { name: 'Jane', age: 25 } ] } })
在上面的代碼中,items是一個由數字組成的簡單數組,而users是一個由對象組成的嵌套數組。我們可以通過以下方式訪問這兩個數組:
vm.items[0] // 1 vm.users[0].name // 'John' vm.users[1].age // 25
在模板中使用數組時,可以使用v-for指令遍歷數組中的每個元素。例如:
<ul> <li v-for="item in items">{{ item }}</li> </ul> <ul> <li v-for="user in users">{{ user.name }} ({{ user.age }})</li> </ul>
在上面的代碼中,第一個ul標簽中的v-for指令遍歷了items數組中的每個元素,并將其渲染為一個li標簽。第二個ul標簽中的v-for指令遍歷了users數組中的每個對象,將每個對象的name屬性和age屬性渲染到了li標簽中。
總之,Vue對象是由Vue組件所構成的數據對象。這些Vue對象可以包含多個屬性,包括嵌套對象和數組。在使用模板語法時,可以直接引用Vue對象和它的屬性,并使用v-for指令遍歷數組中的元素。
上一篇python 插件包
下一篇vue canvas移動