vue.js实战---添加/删除数据

vue.js简单实现的页面添加数据，删除数据的效果，效果如下图

demo.gif

代码：

    

        
任务列表
    
    

        
添加任务：
        
        

            
1个任务未完成
            

                所有任务
                未完成任务
                完成的任务
            
        
        
        
        

            
还没有添加任何任务
            
 
                

                    

                        
                        {{item.title}}
                        x
                    
                    
                
            
        
    

 

css样式：

  .wrap{
width: 100%;height: auto
  }
.page-top{
width: 700px;height: 40px;line-height: 40px;background-color: #ccc;margin:0px auto
}
  .main{
width: 700px;height: auto;margin: 0px auto;line-height: 40px
}
.task-count {
width: 100%;height: auto;float: left;
}
.task-count li:nth-child(1){
float: left;width: 30%
}
.task-count li:nth-child(2){
float:right;width: 70%
}
.action a{
color: black;border:1px solid black;
float: right;padding: 0px 10px
}
  .task-input{
width: 100%;height: 40px;outline: none;

}
  .big-tittle{
display: inline-block;
  }
.tasks{
width: 100%;height: auto;float: left;
        }
  .no-task-tip{
width:700px;height:40px;border:1px solid #ccc;line-height: 40px
    }
          .todo-list li{
width: 100%;height: 40px;border: 1px solid #ccc
  }

        input[type=checkbox] {  
    margin:15px 20px;
width: 15px;height: 15px;
border-radius:100%;
background-color: #fff;
border: 1px solid #ccc;
  }

  .label{
font-size: 16px;vertical-align:left;

}
  .line_through{
text-decoration:line-through;
color: #ccc
}

  .destroy{
float: right;line-height: 40px;
font-size: 14px;margin-right: 15px;
  }

运用点：

v-show ：

当列表页还没出现的时候

还没有添加任何任务

通过判断标签里面的的 list里面有没有对象，没有的话显示，有的话隐藏

动态绑定class

中的:class="{line_through:item.isChecked}" 是动态绑定 class，语法 :class="{className:表达式}" 表达式的值为true时添加className,反之不添加。在这个案例中的运用是 如果checkbox被勾选，则给文本改变颜色和在中间添加划线 .line_through{text-decoration:line-through;color: #ccc}·
结合下面checkbox 双向绑定数据用v-model="item.isChecked"，也是结合上面的去判断

对于新添加的数据

methods:{ addTode(ev){ console.log('点到我了'); this.list.push({ title:this.todo, isChecked:false }); this.todo="" },
这一段中是methods方法，可以注意到isChecked:false,没错，这里对于新添加的数据要定义好，根据这里的运用是把checkbox默认为没有勾选

v-for=" "的运用

v-for="item in list" 这里是循环

还有很多运用到的，这里就不一 一写出，主要是了解数据的运用，根据MVVM模式去绑定数据渲染页面，同时，要先把静态页面写出来，然后再运用vue.js去处理页面
参考视频教程

第一节笔记