jQuery和vue-js实现购物清单

最新推荐文章于 2023-06-12 21:07:59 发布

qq_34983808

最新推荐文章于 2023-06-12 21:07:59 发布

阅读量605

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/qq_34983808/article/details/101375292

版权

本文介绍了如何使用jQuery和vue.js分别实现购物清单功能，重点展示了vue.js的双向数据绑定特性，从而实现动态更新购物清单的效果。

摘要由CSDN通过智能技术生成

`jQuery`实现购物清单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
        .container {
            width: 40%;
            margin: 20px auto 0px auto;
        }

        .removed {
            color: gray;
        }

        .removed label {
            text-decoration: line-through;
        }

        ul li {
            list-style-type: none;
        }
    </style>
</head>

<body>
<div class="container">
    <h2>My Shopping List</h2>
    <div class="input-group">
        <input placeholder="add shopping list item" type="text" class="js-new-item form-control">
        <span class="input-group-btn">
          <button class="js-add btn btn-default"
                  type="button">Add!</button>
        </span>
    </div>
    <ul>
        <li>
            <div class="checkbox">
                <label>
                    <input class="js-item" name="list"
                           type="checkbox"> Carrot
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox