【转载】Vue入门，实现todolist

<div id="app">
    <h1>新增</h1>
    <!-- v-model数据的双向绑定 -->
    <input type="text" v-model="value">
    <button @click="addAction">新增</button>
    <h1>列表</h1>
    <ul>
        <!-- v-for循环生成显示列表里面的事件,赋予新的key,判断状态是否为finished 是则添加类名finished-->
        <li v-for="(item,index) in showList" 
          :key="item.id" 
          :class="{finished:item.status==='finished'}">{{item.value}}
        <!-- v-if判断上面li循环的item.id值，新添加的事件id为todo后面添加按钮，点击完成 -->
          <button v-if="item.status ==='todo'" 
          @click="finiHandler(item.id,index)">完成</button>
        </li>
    </ul>
    <h1>操作</h1>
    <!-- v-for循环生成[所有，完成，未完成]按钮,选中的按钮添加类名active，添加点击事件改变item.id -->
    <button v-for="(item,index) in btnList" 
          :key="item.id" 
          :class="{active:item.id===selected }" 
          @click='changeHandler(item.id)'>{{item.text}}</button>
</div>

    <style>
        .finished {
            text-decoration: line-through;
      }
        .active {
            background-color: yellow;
      }
    </style>

//引入vue.js文件
    <script src="vue.js"></script>
    <script>
//实例化一个vm对象
            var vm = new Vue({
  // 作用域
            el:"#app",
  // 数据属性
            data:{
  // 初始数据
            value:'',
  // 选中'所有'这个按钮
            selected:"all",
  // 存放数据的数组
            list:[],
  // 按钮列标[所有，完成，未完成]
            btnList:[
                {text:"所有",id:"all"},
                {text:"完成",id:"finished"},
                {text:"未完成",id:"todo"}
                ]
        },
            computed:{
                showList(){
   // 显示selected选中的
     return this.selected ==='all'? this.list:this.list.filter(item=>item.status===this.selected)
                }
        },
            methods:{
    //添加事件到list列表[1]
                addAction(){
                    this.list.push({
                        value:this.value,
                        status:'todo',
     // 用时间戳记录id数据唯一性
                        id:new Date().getTime(),
                    });
     // 清空input框
                    this.value='';
                },
     // 点击完成按钮事件函数[w]
                finiHandler(id,index){
     // 找到list数组里面id等于点击的按钮的id
     // 改变这个对象的status为finished
                    const item = this.list.find((item) =>item.id===id)
                    item.status ='finished'
                },
     // [所有，完成，未完成]按钮的切换事件函数[3]
                changeHandler(id){
     // 改变selected为当前选中按钮的id值
                    this.selected = id
                },
       }
  });
    </script>
</body>