json如何转换为列表

今天我们来实现一个Vue项目实战，我们将使用Vue来实现一个TodoList。

首先我们需要搭建我们的Vue项目，可以使用Vue脚手架直接搭建。使用以下命令：

  npm install -g vue-cli
  vue init webpack-simple todo-list
  cd todo-list
  npm install
  npm run dev

接下来我们要新建一个TodoList组件，在 src/components 目录下新建 TodoList.vue 文件，代码如下：

  <template>
    <div>
      <h1>TodoList</h1>
      <input v-model="newTodo" placeholder="请输入待办事项"/>
      <button @click="addTodo">添加</button>
      <ul>
        <li v-for="(item,index) in todos" :key="index">{{item}}</li>
      </ul>
    </div>
  </template>
  <script>
    export default {
      data () {
        return {
          todos: [],newTodo: ''
        }
      },methods: {
        addTodo () {
          if (this.newTodo.trim() !== '') {
            this.todos.push(this.newTodo.trim())
            this.newTodo = ''
          }
        }
      }
    }
  </script>

在添加待办事项的方法里，我们先检查一下输入的待办事项是否为空，如果不为空就将它添加到待办事项列表里，并清空输入框。

接下来在 src/App.vue 文件中引入 TodoList 组件：

  <template>
    <div id="app">
      <TodoList />
    </div>
  </template>
  <script>
    import TodoList from './components/TodoList.vue'
    export default {
      name: 'app',components: {
        TodoList
      }
    }
  </script>

最后我们要在样式表 src/style.css 中添加一些样式：

  input {
    padding: 5px;
    border-radius: 3px;
    margin-right: 10px;
  }
  button {
    padding: 5px 10px;
    background-color: #3399ff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    margin-top: 5px;
    background-color: #f2f2f2;
    padding: 5px;
    border-radius: 3px;
  }

这样我们就完成了一个简单的Vue实战项目--TodoList。有关更多Vue实战项目和Vue基础知识请关注我。