VUE练习-日程表

Dexlux 发表于 2021-3-7 21:51

本帖最后由 Dexlux 于 2021-3-24 18:00 编辑

<!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>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
   * {
         padding: 0;
         margin: 0;
         box-sizing: border-box;
   }

   h1 {
         margin-top: 100px;
         text-align: center;
   }

   #app {
         width: 300px;
         margin: 20px auto 0;
         border: 1px solid #ccc;
         box-shadow: 10px 10px #ccc;
   }

   input {
         margin: 0 auto;
         display: block;
         width: 300px;
         height: 40px;
   }

   .history {
         margin: 0 auto;
         width: 300px;
         height: 40px;
         line-height: 40px;
         padding-left: 10px;
         border: 1px solid #ccc;
         border-top: none;
         color: rgb(90, 89, 89);
   }

   .history a {
         display: none;
   }

   .history:hover a {
         float: right;
         padding-right: 10px;
         font-size: 12px;
         text-decoration: none;
         color: rgb(90, 89, 89);
         display: block;
   }

   .caozuo {
         position: relative;
         margin: 0 auto;
         width: 300px;
         height: 20px;
         font-size: 12px;
         color: #aaa;
   }

   .a {
         display: inline-block;
         position: absolute;
         left: 0;
         bottom: 0;
   }

   .b {
         display: inline-block;
         position: absolute;
         right: 10px;
         bottom: 0;
         cursor: pointer;
   }
</style>
</head>

<body>
<h1>日程表</h1>
<div id="app">

   <input type="text" v-model="message" @keyup.enter="add" placeholder="输入日程">
   <div class="history" v-for="(item,index) in arr">
         {{ index+1 }} {{arr}}
         <a href="javascript:;" @click="del(index)">删除此项</a>
   </div>
   <div class="caozuo" v-show="arr.length!=0">
         <div class="a">{{arr.length}} items left</div>
         <div class="b" @click="clear">Clear</div>
   </div>
</div>
</body>
<script>
var app = new Vue({
   el: '#app',
   data: {
         arr: [],
         message: ''
   },
   methods: {
         clear: function () {
            this.arr = [];
         },
         add: function () {
            this.arr.push(this.message);
            this.message = '';
         },
         del: function (index) {
            this.arr.splice(index, 1);
         }
   }
})
</script>

</html>

一大杯奶茶呀 发表于 2021-3-19 09:46

同为前端哈哈一起学习啊

wxbb979 发表于 2021-3-8 08:12

前来学习！

kenxy 发表于 2021-3-8 08:51

我也前来与你一起学习！

表情帝 发表于 2021-3-7 22:37

老哥看的学习视频是哪一个啊，我也在学，求一份视频

subney 发表于 2021-3-8 07:23

同学啊，vuer

Wapj_Wolf 发表于 2021-3-8 08:54

弱弱地问一句，VUE是啥？

Dexlux 发表于 2021-3-15 16:35

表情帝发表于 2021-3-7 22:37
老哥看的学习视频是哪一个啊，我也在学，求一份视频

B站一搜一大堆呀我这个是看了黑马的

Dexlux 发表于 2021-3-15 16:36

Wapj_Wolf 发表于 2021-3-8 08:54
弱弱地问一句，VUE是啥？

就是前端的框架的我也是小白才练习呢

栀梦夜夜笙歌 发表于 2021-3-19 09:04

Wapj_Wolf 发表于 2021-3-8 08:54
弱弱地问一句，VUE是啥？

前端开发框架

一大杯奶茶呀 发表于 2021-3-19 09:45

subney 发表于 2021-3-8 07:23
同学啊，vuer

vuer是个啥玩意 {:1_925:}

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

VUE练习-日程表