思路:
- 创建静态页面
- todolist案例实现添加功能
- 在确定按钮上添加功能:v-on添加事件功能,写在methods中
- 在input按钮中添加事件绑定,v-model:双向数据绑定,数据获取,在data中写入input初始值
- 添加事件:数据获取成功后,将其追加进新建的数组中,使用push方法,值就会根据新建的数组所对应的input中显示出来
- todolist案例实现删除功能
- 删除添加的数据,添加删除按钮,绑定删除事件,或者直接在所想要删除的绑定事件的标签上添加删除事件
- 删除功能是根据下标(index)来删除的,所以需要获取参数,因此添加index到li中去获取当前index,删除方法splice
- todolist案例实现选框功能
- 完善静态页面,添加input标签,type="checktext"
- 选框功能也需要获取相应的index,以及获取选框status
- 添加未选中按钮,绑定选中事件,将list数组,改写为下列代码中所示
- 事件中获取index对应的item,获取item后改变status
- 同时按钮中使用三目运算,根据status判断是否选中
代码
<!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>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button @click="onSure">确定</button>
<ul>
<li v-for="(item,index) in list">
<input type="checkbox" v-model="item.state">
{{item.name}}
<button @click="onDelete(index)">删除</button>
<button @click="onChoose(index)">{{item.state? '选中':'未选中'}}</button>
</li>
</ul>
</div>
<script src="../lib/vue.global.js"></script>
<script>
const {createApp}=Vue
createApp({
data() {
return {
inputValue: '',
list:[
{name:'java', state:false,},
{name:'javaEE', state:false,},
],
};
},
methods: {
//确定
onSure(){
let obj={
name:this.inputValue,
state:false,
}
this.list.push(obj)
this.inputValue=''
},
//删除
onDelete(index){
this.list.splice(index,1)
},
//选中
onChoose(index){
let item= this.list[index]
item.state=!item.state
}
},
}).mount('#app') //挂载app节点
</script>
</body>
</html>