vue todomvc，加入了新功能，输入分号新增多条

基于之前简单的todos和其他博主的文章之上，我在完成和官网一样的功能的基础上新增了一个功能，输入分号新增多条。
比如，输入aa；bb，新增两条aa和bb（英文;和中文；均可）
官网的样式可以自取https://github.com/tastejs/todomvc/blob/master/examples/vue/node_modules/todomvc-app-css/index.css
html部分

<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        v-model="addMsg"
        placeholder="What needs to be done?"
        @keyup.enter="add"
      />
    </header>
    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li
          v-for="(todo, i) in filterTodos"
          :key="todo.id"
          :class="{ 'completed': todo.bool, 'editing': todo == myTodo }"
        >
          <div class="view">
            <input class="toggle" type="checkbox" v-model="todo.bool"/>
            <label @dblclick="myTodo = todo">{{todo.skill}}</label>
            <button class="destroy" @click="remove(i)"></button>
          </div>
          <input
            type="text" 
            @keyup.enter="edit(i)"
            @keyup.esc="myTodo = {}"
            @blur="myTodo = {}"
            class="edit"
            :value="todo.skill"
            :ref="'editInp'+i"
            v-focus
          />
        </li>
      </ul>
    </section>
    <footer class="footer" v-show="todos.length != 0">
      <span class="todo-count"><strong>{{ numLeft }}</strong> item left</span>
      <ul class="filters">
					<li>
						<router-link class="selected" to="/">All</router-link>
					</li>
					<li>
						<router-link to="/active">Active</router-link>
					</li>
					<li>
						<router-link to="/completed">Completed</router-link>
					</li>
				</ul>
      <button class="clear-completed" @click="clear">Clear completed</button>
    </footer>
  </section>
</template>

js部分

<script>
export default {
  data() {
    return {
      todos: [],
      addMsg:"",
      myTodo:{}
    };
  },
  methods: {
    add() {
      let id = this.todos.length ? this.todos[this.todos.length - 1].id + 1 : 1;      
      //输入新增 分号多条
      if(this.addMsg.search(';')!=-1){
        this.addMsg=this.addMsg.split(';')
        this.addMsg.forEach((elem, index) => {
          this.todos.push({
            id,
            skill: this.addMsg[index],
            bool: false,
          });
        });       
      }
      else if(this.addMsg.search('；')!=-1){
        this.addMsg=this.addMsg.split('；')
        this.addMsg.forEach((elem, index) => {
          this.todos.push({
            id,
            skill: this.addMsg[index],
            bool: false,
          });
        });       
      }
      else{
        this.todos.push({
          id,
          skill: this.addMsg,
          bool: false,
        });
      }
      // 添加后清空
      this.addMsg = "";
    },
    remove(index) {
      this.todos.splice(index, 1);
    },
    edit(index) {
      console.log(this.todos);
      this.todos[index].skill = this.$refs["editInp"+index].value;
      this.myTodo = {};
      console.log(this.todos)
    },
    clear() {
      this.todos = [];
    },
  },
  directives: {
    focus: function (el) {
      el.focus();
    },
  },
  computed: {
    numLeft: function () {
      return this.todos.filter((t) => !t.bool).length;
    },
    "filterTodos":function(){
      let path = this.$route.path
      if(path==='/'){
        return this.todos
      }else if(path==='/completed'){
        return this.todos.filter(t=>t.bool)
      }else{
        return this.todos.filter(t=>!t.bool)
      }
    }
  },
};
</script>

新增功能效果图

记录学习的过程~