基础数据渲染列表

直接用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 }}，空格多少不需要关注，我空格是为了看着好看，以后改的时候眼睛看着好找。

样式就不写了
所以这篇就也结束了。