一、jQuery？
需求
1.输入框中开始没有数据，确定按钮应该是disabled状态
2.当输入框中输入内容时，需要判断实时切换输入框的disabled 状态。例如:有内容，则按钮可用，没 有内容:按钮不可用
3.当点击确定按钮之后，获取输入框的值，填入到列表的最下方。并且要清空输入框的值,确定按钮变为不可用
4.在输入框中按回车，如果输入框有值，则填入到列表最下方，并且清空输入框，按钮不可用。如果输入框没有值，即空的时候，则回车无效
5.删除按钮点击后，能够删除对应的行
6.待办事项:刚开始是隐藏状态display: none ，当删除了所有项目后，则暂无待办事项变为可见状态.。当添加了新事项之后，暂无待办事项隐藏
代码实现
<!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>
<style>
#box > div:last-child {
color: green;
border: 1px solid green;
padding: 5px;
border-radius: 3px;
display: none;
}
</style>
</head>
<body>
<div id="box">
<div>
<input type="text" placeholder="请输入待办事项" />
<button disabled>确定</button>
</div>
<div>
<ul>
<li>
<span>吃饭</span>
<button>删除</button>
</li>
<li>
<span>睡觉</span>
<button>删除</button>
</li>
<li>
<span>敲代码</span>
<button>删除</button>
</li>
</ul>
</div>
<div>暂无待办事项</div>
</div>
<script src="./vendor/jquery-3.6.0.min.js"></script>
<script>
// 监听输入框的值 的实时变化, 修改 确定 按钮的 不可用状态
$("input").on("input", function () {
// 获取输入框的值
let val = $(this).val()
console.log(val)
// 空字符串的判断方式: 1.长度==0 2. == ''
// if: 会把 '' [] {} 0 0.0 null undefined 判断为false
if (val == "") {
// 是空字符串, 则确定按钮不可用
// prop: 设置系统属性
$(this).next().prop("disabled", true)
} else {
// "false": 这叫 字符串
// false: 这是 boolean
$(this).next().prop("disabled", false)
}
})
// 按钮中, 包含 确定 文字的
$("button:contains(确定)").click(function () {
// 添加新元素: 把 暂无 隐藏
$("#box>div:last-child").css("display", "none")
let $input = $(this).prev() //当前元素 上方的元素
// 制造新的元素, 用模板字符串 ``
let el = `<li>
<span>${
$input.val()}</span>
<button>删除</button>
</li>`
// 添加到 ul 的子元素的最后
$("ul").append(el)
$input.val("") //清空: 把输入框的值改为 空字符串
// 不可用
$input.next().prop("disabled", true)
})
$("input").keyup(function (e) {
// 按键编号: 13 代表回车
if (e.keyCode == 13) {
// 输入框的值 的 长度 不是 0, 代表有值
if ($(this).val().length != 0) {
// 添加新元素, 隐藏 暂无
$("#box>div:last-child").css("display", "none")
let el = `<li>
<span>${
$(this).val()}</span>
<button>删除</button>
</li>`
$("ul").append(el) //添加到子元素
$("input").val("") //清空输入框
$(this).next().prop("disabled", true) //按钮不可用
}
}
})
// 关于删除: 因为删除按钮特别多, 如果为每一个按钮添加事件, 需要非常多的事件函数, 浪费内存!
// 新增按钮添加事件, 也比较繁琐
// 如果是新增按钮, 应该写成 <button οnclick="del()">删除</button>
// 需要额外搭配一个 del 函数, 实现绑定
// 冒泡: 监听 ul 中, 所有button 触发的点击事件
$("ul").on("click", "button", function () {
// this: 代表按钮
$(this).parent().remove() //移除按钮的父节点
// 判断: 如果 ul 中没有子元素了, 则显示 暂无待办事项
console.log("子元素:", $("ul").children())
if ($("ul").children().length == 0) {
// display:block; 显示出来
$("#box>div:last-child").css("display", "block")
}
})
</script>
</body>
</html>
二、Vue
需求
1.输入框有值则按钮可用，没有值按钮不可用
2.回车/确定按钮:可以把值加入到下方列表的最后并清空输入框
3．奇数行和偶数行颜色不同
4．行越往下，字体大小越大每层+1
5．删除按钮点击后，删除对应行．所有行删除之后，则显示暂无待办事项
代码实现
<template>
<div>
<div>
<!-- v-model: 双向绑定 -->
<!-- 方向1: 数据 显示到DOM -->
<!-- 方向2: 表单元素用户可以修改, DOM变化 同步更新给数据项 -->
<input
@keyup.13="addItem"
v-model="todo"
type="text"
placeholder="请输入待办事项"
/>
<!-- todo 变量变化时, 会自动更新相关的DOM元素 -->
<button :disabled="todo == ''" @click="addItem">确定</button>
</div>
<div>
<ul>
<!-- 动态样式 :class="{样式类: true/false}" -->
<li
:class="{ even: index % 2 == 0, odd: index % 2 == 1 }"
:style="{ fontSize: 18 + index + 'px' }"
v-for="(todoItem, index) in todoItems"
:key="index"
>
<span>{
{
todoItem }}</span>
<!-- 数组数据的删除: splice(序号,个数) -->
<button @click="todoItems.splice(index, 1)">x</button>
<!-- Vue的核心: 改动数据, 自动变更DOM, 无需人为操作DOM -->
</li>
</ul>
</div>
<!-- v-show: 利用css的display:none 实现显示切换 -->
<div v-show="todoItems.length == 0">暂无待办事项</div>
<!-- 数组判空, 看长度 -->
</div>
</template>
<script>
export default {
//vdata
data() {
return {
todoItems: ["吃饭", "睡觉", "敲代码"],
todo: "",
}
},
// vmethod
methods: {
addItem() {
// 如果 输入框 没有内容, 则后续代码不执行
if (this.todo == "") return
// push: 把值添加到数组结尾
this.todoItems.push(this.todo)
// 清空输入框: 数据变更 DOM自动更新
this.todo = ""
},
},
}
</script>
<style lang="scss" scoped>
ul {
margin: 5px;
padding: 0;
> li {
// & 代表当前的元素, 目前就是li
// li.even : li标签 带有even 样式类
&.even {
background-color: green;
}
&.odd {
background-color: yellow;
}
border: 1px solid gray;
width: 200px;
border-radius: 15px;
margin: 4px 0;
padding: 4px;
display: flex;
justify-content: space-between;
}
}
</style>
三、微信小程序
需求
代码实现
.wxml:
<view class="h1">待办事项列表</view>
<view class="hr"></view>
<view class="todo-header">
<input placeholder="请输入待办事项" type="text" bindinput="inputEvent" value="{
{val}}"></input>
<button type="primary" bindtap="tapAdd">添加新事项</button>
</view>
<view>
<text wx:if="{
{todos.length==0}}">提示：当前没有待办事项</text>
<view class="todo-list-item" wx:for="{
{todos}}" wx:key="*this">
<text>{
{
index+1}}.{
{
item}}</text>
<button type="warn" size="mini" bindtap="tapDel" data-i="{
{index}}">删除</button>
</view>
</view>
.wxss:
.h1{
font-size:24px;
margin-bottom:15rpx;
}
.hr{
height:0;
margin:10rpx 0;
border-bottom: 1px solid #ccc;
}
.todo-header{
display: flex;
align-items: center;
}
.todo-header input{
flex: 2;
border:1px solid #ccc;
padding:15rpx 10rpx;
margin-right: 10rpx;
}
.todo-header button{
flex: 1;
}
.todo-list-item{
margin-top: 15rpx;
}
.todo-list-item{
display: flex;
align-items: center;
}
.todo-list-item text{
font-size:18px;
flex: 3;
}
.todo-list-item button{
flex: 1;
}
.js:
Page({
data: {
todos:['吃饭','睡觉','打豆豆'],
val:'' //绑定文本框中的值
},
//文本输入触发
inputEvent(event){
this.data.val=event.detail.value
},
//点击添加按钮事件
tapAdd(){
if(!this.data.val.trim()) return; //判断是否为空
let todos=this.data.todos
todos.push(this.data.val)
this.setData({
todos,val:''})
},
//点击删除
tapDel(event){
let i=event.target.dataset.i
let todos=this.data.todos
todos.splice(i,1)
this.setData({
todos})
}
})