vue2.0 data里面怎么定义数组+属性
时间: 2023-12-15 09:05:32 浏览: 168
vue2.0基于vue-cli+element-ui制作树形treeTable
在Vue 2.0中,你可以使用以下方式定义包含数组和属性的数据:
```
data() {
return {
myArray: [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'Bob', age: 40 }
],
myProp: 'Hello World'
}
}
```
在这个例子中,我们定义了一个包含三个对象的数组`myArray`,每个对象包含`name`和`age`属性。我们还定义了一个属性`myProp`,它包含字符串`'Hello World'`。你可以在Vue组件的模板中使用这些数据,如下所示:
```
<template>
<div>
<ul>
<li v-for="person in myArray" :key="person.name">
{{ person.name }} is {{ person.age }} years old.
</li>
</ul>
<p>{{ myProp }}</p>
</div>
</template>
```
在这个例子中,我们使用了Vue的`v-for`指令来遍历`myArray`数组,并在模板中显示每个人的姓名和年龄。我们还使用了双大括号`{{ }}`来显示`myProp`属性的值。
阅读全文