Vue小案例-小黑记事本的实现

最新推荐文章于 2024-02-12 15:55:27 发布

VIP文章 DjangoandPython

最新推荐文章于 2024-02-12 15:55:27 发布

阅读量1.2k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/DjangoandPython/article/details/109845200

版权

小黑记事本综合应用了前面学习的集中指令，并且对指令进行综合性的基础应用联系。（样式没有写，仅实现了vue指令的功能。）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本</title>
</head>
<body>
    <!-- 主题区域 -->
    <div id="toduapp">
        <h1>小黑记事本</h1>
        <!-- 输入框 -->
        <!--输入框双向绑定数据，更改默认数据inputValue，然后绑定回车事件addValue，点击回车将数据添加到数组-->
        <input type="text" v-model="inputValue" @keyup.enter="addValue" autofocus='autofocus' autocomplete="off" placeholder="请输入任务">
        <!-- 列表区域 -->
        <ul>
            <!--生成事件列表，v-for循环数组数据，绑定删除方法，点击时候，可以删除本条数据--&

最低0.47元/天解锁文章

优惠劵

DjangoandPython

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue小案例-小黑记事本的实现

小黑记事本综合应用了前面学习的集中指令，并且对指令进行综合性的基础应用联系。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小黑记事本</title></
复制链接

扫一扫