<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<style>
.red{
background-color: red;
}
</style>
</head>
<body>
<!--
1.添加功能
1-1 先写模拟数据 并且把这个模拟数据以列表的方式展示
1-2 给添加按钮进行点击事件的添加
1-3 在刚才创建的函数中 得到输入框的值
1-4 在进行添加 把输入框的值添加到iobj这个数组上
1-5 添加完成清空输入框
2.任务总数
思考 {{表达式}}
3.勾选变色
3-1 在列表中先完成相关的页面布局
3-2 在每一条数据上面加一个用来保存是否勾选的状态变量
3-3 我们可以把这个状态变量 与复选框进行绑定 从而当复选框勾选的时候 让这个状态变量进行真之间的切换
3-4 给需要改变的dom元素 设置class类名 并且在类名中使用三元运算符 来动态的添加或者移除样式即可
3-5 写出相关的样式
4.剩余数量
4-1 {{表达式}} {{放一个函数会发生什么？会把函数的返回值显示出来}}
4-2 在函数中 循环数据 并且判断数据的style是否为false
4-3 如果为false 那么我们就可以转让一个计数器变量++
4-4 在循环完毕后 把这个计数器变量 return出去
5勾选删除
5-1 删除按钮添加事件调用函数
5-2 把原始数据 赋值给一个新变量保存（此时 我们的数据 在data中的变量和 新变量中都有一份）清空原始数据
5-3 循环新数据 判断新数据中的 style是否为false
5-4 并且把新数据为false的内容 push到原始数据中
6暂无数据
6-1 需要在页面中添加暂无数据的dom内容
6-2 v-if 与 v-else 条件渲染 来进行判断
6-3 判断数据的length是否为0 为0 就是没有数据 反之有数据
7点击修改
7-1 在页面中指定的位置添加一个输入框 并且把输入框和 展示的变量双向绑定起来
7-2 在每条数据上面添加一个变量 这个变量的作用就是用来控制每一条数据的输入框显示状态
7-3 使用条件渲染 判断这个edit变量 从而让显示文字或者显示输入框
7-4 给文字添加点击事件 并且给 输入框添加光标移出事件 调用相同一个函数
7-5 在这个函数中编写 点击的是哪一条数据 就让这一条数据的edit变量取反
-->
<div id="demoDiv">
<h1>任务列表</h1>
<p>任务总数:{{obj.length}}--还有:{{sheng()}} 未完成: <button @click="del()">完成</button></p>
<ul v-if="obj.length!=0">
<li v-for="(v,i) in obj" v-bind:key="i">
<input type="checkbox" v-model="v.style"/>
<span :class="v.style?'red':''" v-if="v.edit" v-on:click="edit(i)">{{v.title}}</span>
<input type="text" v-model="v.title" v-else @blur="editTwo(i)"/>
</li>
</ul>
<h1 v-else>暂无数据！！！^_^</h1>
<input type="text" v-model="inputval"/><button @click="add()">添加</button>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
obj:[
{title:"设计",style:false,edit:true},
{title:"编写页面代码",style:false,edit:true},
{title:"编写js代码",style:false,edit:true},
{title:"设计产品原型",style:false,edit:true},
],
inputval:""
},
methods:{
// 点击修改
edit(i){
this.obj.forEach((item,index)=>{
item.edit=true
});
this.obj[i].edit=!this.obj[i].edit
},
editTwo(i){
this.obj[i].edit=true
},
// 删除
del(){
let newObj=this.obj
this.obj=[]
for(var i=0;i<newObj.length;i++){
if(newObj[i].style==false){
this.obj.push(newObj[i])
}
}
},
add(){
console.log(this.inputval)
this.obj.push({title:this.inputval,style:false,edit:true})
this.inputval=""
},
// 剩余数量
sheng(){
let num=0;
this.obj.forEach((item,index)=>{
if(item.style==false){
// 没有勾选的
num+=1
}
});
return num;
}
}
})
</script>
</body>
</html>
扫一扫
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
