标签：Vue checked title todolist 录制 list nodejs 待办 false

app.vue

<template>


  <div id="app"> 
      
      <input type="text" v-model='todo' @keydown="doAdd($event)" />


      <br>

      <hr>

      <br>

    <h2>进行中</h2>
          <ul>

            <li v-for="(item,key) in list" v-if="!item.checked">

              <input type="checkbox" v-model='item.checked'> {{item.title}}   ----  <button @click="removeData(key)">删除</button>
            </li>
          </ul>


    <br>
    <h2>已完成</h2>
    <ul class="finish">

      <li v-for="(item,key) in list" v-if="item.checked">

          <input type="checkbox" v-model='item.checked'> {{item.title}} ----<button @click="removeData(key)">删除</button>
      </li>
    </ul>


    <h2 v-if='ok'>这是一个ok</h2>

    <h2 v-if='!ok'>这是一个No</h2>

    <button @click="getList()">获取list的值</button>

  </div>
</template>

<script>

  /*
       ['录制nodejs','录制ionic']


          [

            {
              title:'录制nodejs',
              checked:true
            },
              {
              title: '录制ionic',
              checked: false
            }
          ]
          
          */

    export default {     
      data () { 
        return {
          ok:false,
          todo:'' ,
          list: [

            {
              title: '录制nodejs',
              checked: true
            },
            {
              title: '录制ionic',
              checked: false
            }
          ]

         
        }
      },
      methods:{

        doAdd(e){
              console.log(e.keyCode)

              if(e.keyCode==13){
              //1、获取文本框输入的值   2、把文本框的值push到list里面
              this.list.push({

                title: this.todo,
                checked: false
              })

              this.todo='';
            }
        },
        removeData(key){

            // alert(key)

            //splice  js操作数组的方法
            this.list.splice(key,1);
        },

        getList(){

          console.log(this.list)
        }
      }

    }
</script>


<style lang="scss">

.finish{

  
  li{
    background:#eee;
  }
}

</style>

标签：Vue,checked,title,todolist,录制,list,nodejs,待办,false
来源： https://www.cnblogs.com/span-phoenix/p/13619899.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。