经验总结

  1. 首页 > 生活 > >

一篇文章带你了解网页框架——Vue简单入门( 六 )

生活百科

* {margin: 0;padding: 0;}html,body,#mask {width: 100%;height: 100%;}#mask {background-color: #c9c9c9;position: relative;}#mask .center {position: absolute;background-color: #fff;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 10px;}#mask .center .title {position: absolute;display: flex;align-items: center;height: 56px;top: -61px;left: 0;padding: 5px;padding-left: 10px;padding-bottom: 0;color: rgba(175, 47, 47, 0.8);font-size: 26px;font-weight: normal;background-color: white;padding-right: 50px;z-index: 2;}#mask .center .title img {height: 40px;margin-right: 10px;}#mask .center .title::before {content: "";position: absolute;width: 0;height: 0;border: 65px solid;border-color: transparent transparent white;top: -65px;right: -65px;z-index: 1;}#mask .center > img {display: block;width: 700px;height: 458px;}#mask .center a {text-decoration: none;width: 45px;height: 100px;position: absolute;top: 179px;vertical-align: middle;opacity: 0.5;}#mask .center a :hover {opacity: 0.8;}#mask .center .left {left: 15px;text-align: left;padding-right: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}#mask .center .right {right: 15px;text-align: right;padding-left: 10px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;}案例：记事本下面我们通过一个案例来巩固前面所学习的全部知识点
案例要求：

  • 新增：书写内容，点击Enter后，便利贴放于页面
  • 删除：点击内容后方的"x"号后，该内容消失
  • 统计：统计内容数量，在左下角显示
  • 清空：点击右下角清空键，内容全部清空
  • 隐藏：当无内容时，下述记事本部分隐藏
代码展示：
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title>小黑记事本</title><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta name="robots" content="noindex, nofollow" /><meta name="googlebot" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1" /><!--css样式在下列出--><link rel="stylesheet" type="text/css" href="https://www.huyubaike.com/biancheng/css/index.css" /></head><body><!-- 主体区域 --><section id="todoapp"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><!--输入栏，实现双向绑定，当点击时使用add方法--><input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"class="new-todo" /></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><!--记事主题内容，采用v-for遍历记事内容list的内容，输出在页面--><li class="todo" v-for="(item,index) in list"><div class="view"><!--记事内容--><span class="index">{{ index+1 }}.</span><label>{{ item }}</label><!--删除按钮，点击时触发remove功能，参数为当前index--><button class="destroy" @click="remove(index)"></button></div></li></ul></section><!-- 统计和清空 --><!--记事本主体，当不存在记事内容时，隐藏--><footer class="footer" v-show="list.length!=0"><span class="todo-count" v-if="list.length!=0"><!--统计值：直接采用list的长度代替--><strong>{{ list.length }}</strong> items left</span><!--记事本主体，当不存在记事内容时，隐藏--><button v-show="list.length!=0" class="clear-completed" @click="clear">Clear</button></footer></section><!-- 底部 --><footer class="info"><p><a href="http://www.itheima.com/"><img src="https://www.huyubaike.com/biancheng/img/black.png" /></a></p></footer><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({// 实现Vue绑定el: "#todoapp",data: {// list表示记事内容list: ["写代码", "吃饭饭", "睡觉觉"],// 表示目前输入内容，双向绑定inputValue: "好好学习,天天向上"},methods: {// 新添方法，将输入值填入计时内容中add: function () {this.list.push(this.inputValue);},// 删除方法，删除当前下表为index的内容remove: function (index) {this.list.splice(index, 1);},// 清除方法，清除所有方法clear: function () {this.list = [];}},})</script></body></html>

经验总结扩展阅读


上一篇：2023年2月9日拜观音黄道吉日 2023年农历正月十九宜拜观音吗

下一篇：2023年农历正月十九宜求神拜佛吗 2023年农历正月十九求神拜佛吉日