vue2语法的使用待办事项的添加删除和样式的改变

<template>

  <div>

 <div>

  <!-- 输入框，v-model进行数据双向绑定 -->

  <input type="text" v-model="current">

  <!-- 添加按钮 ,v-on事件绑定简写@-->

  <button @click="add">添加</button>

  <!-- 渲染待办事项  -->

  <ul>

    <li v-for="(it,fi) in list">

          <!-- 添加复选框,打勾的同时进行划线，判断哪一个打勾了通过下标找 -->

          <input type="checkbox" :value="fi" v-model="finish" >

          <span v-if="finish.includes(fi)" style="text-decoration: line-through;">

            {{fi+1}}-{{ it }}

          </span>

          <!-- 正常未完成的样式-->

          <span v-else>

            {{fi+1}}-{{ it }}

          </span>

          <span @click="del(fi)" style="margin-left: 20px;">❌</span>

         

    </li>

  </ul>

  <!-- 判断v-if如果没有添加就显示暂无事项 -->

       <div  v-if="list.length ===0">

        暂无事项

       </div>

 

 </div>

 

  </div>

</template>

<script>

  export default {

    //vdata快捷生成

    data(){

return{

  current:'',

  list:[],

  finish:[],

}

    },

    methods:{

      add(){

        //js代码中调用数据项需要this  this当前组件对象

        console.log(this)

        this.list.push(this.current)

   

      },

      del(index){

        console.log(this.list[index])  

        // 找到要删除的那一项

        this.list.splice(index,1)

      }

    }

  }

</script>

<style lang="scss" scoped>

</style>