vue to-do-list

主要是使用到v-for遍历渲染数组，v-model双向绑定输入框的值，以及vue对于数组的增删改查（需要监听到），一般是需要用push,set,splice,pop等方法才能渲染到页面，像直接使用等于号赋值，虽然log控制台打印出来数组是赋值了的，但页面是没有重新渲染。
效果图如下：丑了点，没调样式，没有ui框架，但功能还是有的。

<template>
  <div>
    <input type="text" v-model="content"/>
    <button @click="add">新增</button>
    <div v-for="(item,index) in arr" :key="index">
      <div class="xuhao">序号{{ index+1 }}</div>
      <div class="neiron" v-if="arrEdit[index]===0">{{ item }}</div>
      <div class="neiron" v-if="arrEdit[index]===1"><input type="text" v-model="change"></div>
      <div class="btns">
        <button v-if="arrEdit[index]===0" @click="update(item,index)">编辑</button>
        <button v-if="arrEdit[index]===1" @click="save(index)">保存</button>
        <button @click="toDoDelete(index)">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      arr:[],//存todolist
      arrEdit:[],//用个数组编辑标识状态
      content:'',
      change:''
    } 
  },
  methods:{
    add() {
      this.arr.push(this.content)
      this.arrEdit.push(0)
      this.content=''
    },
    update(item,index){
      this.$set(this.arrEdit,index,1)
      this.change = item
    },
    save(index){
      this.$set(this.arr,index,this.change)
      this.$set(this.arrEdit,index,0)
      this.change = ''
    },
    toDoDelete(index){
      this.arr.splice(index,1)
      this.arrEdit.splice(index,1)
    }
  }
}
</script>

<style scoped>
.xuhao{
  display: inline-block;
  width: 100px;
}
.neiron{
  display: inline-block;
  width: 200px;
}
.btns{
  display: inline-block;
  width: 120px;
}
</style>