直接用app.vue来练手
修改<script>
<script>
export default {
name: 'app',
data: function () {
return {
list: [
{
label: '第一个',
state: true
},
{
label: '第二个',
state: false
}
]
}
}
}
</script>
在script里，export default相当于是写了一个 new vue()，在里面的data，则是对应的数据，官方是es6的语法，所以写的是data () {}，转成之前的js语法就是 data: function () {}。
这个data方法，return一个对象，这个对象里放的就是所用的数据内容，这里我们只用到一个list对象数组，所以就只放了一个list。
修改html部分
<template>
<div id="app">
<ul>
<li v-for="item in list">
{{ item.label }}
</li>
</ul>
</div>
</template>
在html中把数据内容渲染出来是用的v-for方法，写法是v-for="item in items"，items就是数组名，item就是其中的一个值，这里我的数组名是list，items就是list，而item，你开心叫啥就叫啥。
双花括号（大括号？反正就是{{}}）里面放的是对应的内容，比如item的label是要显示的值，那么li里面就写{{ item.label }}，空格多少不需要关注，我空格是为了看着好看，以后改的时候眼睛看着好找。
样式就不写了
所以这篇就也结束了。
