jQuery、Vue和微信小程序数据绑定 ‘待办事项‘ 小练习

本文链接：https://blog.csdn.net/D_evin_/article/details/121977541

本文通过一个'待办事项'小练习，对比介绍了jQuery、Vue和微信小程序的数据绑定实现。涉及内容包括输入框状态控制、列表动态更新、事件监听以及样式差异化处理。对于每个框架，都详细阐述了需求分析和代码实现，帮助读者理解不同框架在前端数据绑定上的差异和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、jQuery？
- 需求
- - 代码实现
二、Vue
- 需求
- - 代码实现
三、微信小程序
- 需求
- - 代码实现

一、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)