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

置顶

D_evin_

已于 2022-02-15 10:46:52 修改

阅读量1.1k

点赞数 4

分类专栏：练习文章标签： vue.js 微信小程序 jquery 大前端前端

于 2021-12-16 17:19:57 首次发布

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

版权

文章目录

一、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",

最低0.47元/天解锁文章

D_evin_

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery、Vue和微信小程序数据绑定 ‘待办事项‘ 小练习

文章目录一、jQuery？需求代码实现二、Vue需求代码实现三、微信小程序需求代码实现一、jQuery？需求1.输入框中开始没有数据，确定按钮应该是disabled状态2.当输入框中输入内容时，需要判断实时切换输入框的disabled 状态。例如:有内容，则按钮可用，没有内容:按钮不可用3.当点击确定按钮之后，获取输入框的值，填入到列表的最下方。并且要清空输入框的值,确定按钮变为不可用4.在输入框中按回车，如果输入框有值，则填入到列表最下方，并且清空输入框，按钮不可用。如果输入框没有
复制链接

扫一扫