ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue_记事本

2022-01-22 22:33:41  阅读:126  来源: 互联网

标签:vue color list rgb 236 font border 记事本


开发

HTML + CSS + Vuejs基于数据的开发模式

以前开发是基于DOM的开发模式,本案例中基于数据的开发模式

  • 列表结构通过 v-for 指令结合数据生成
  • v-on 结合实践修饰符对事件进行限制,比如.enter
  • v-on 在绑定事件时可以传递自定义参数
  • 通过 v-model 可以快速的设置和获取表单元素的值
  • 基于数据的开发模式

预览

功能

新增

  1. 生成列表结构【v-for数组】
  2. 获取用户输入【v-model】
  3. 回车,新增数据【v-on .enter添加数据】

删除

  1. 点击删除指定内容(v-on splice 根据索引删除指定元素)
  2. 数据改变和数据绑定的元素同步改变
  3. 事件的自定义参数

统计

  1. 统计信息个数(v-text 长度)
  2. list.length

清空

  1. 点击清除所有信息(v-on 清空数组)
  2. this.list=[];即可实现

隐藏

  1. 没有数据时,隐藏元素(v-show v-if)
  2. 使用 v-if 作用于

源码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html" charset="UTF-8" />
  <title>记事本</title>
  <meta name="robots" content="noindex,nofollow" />
  <meta name="googlebot" content="noindex,nofollow" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="./css/index.css">

</head>

<body>
<!--主体区域-->
<h1 class="biaoti">notepad记事本</h1>
<section id="todoapp">
  <!--输入框-->
  <header class="header">
    <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="输入任务"
           class="new-todo">
  </header>
  <!--列表区域-->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in list">
        <div class="view">
          <span class="index">{{index+1}}.</span>
          <label>{{item}}</label>
          <button class="destroy" @click="remvoe (index)">删除</button>
        </div>
      </li>
    </ul>
  </section>
  <!--统计清空-->
  <footer class="footer">
    <div>
      <span class="left" v-if="list.length!=0"><strong>{{list.length}}</strong>&nbsp items </span>
      <span class="right" @click="clear" v-show="list.length!=0"><button>Clear</button></span>
    </div>
  </footer>
</section>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#todoapp",
    data: {
      list: ["今日任务1", "今日任务2", "今日任务3"],
      inputValue: "哈哈小恶习"
    },
    methods: {
      add: function () {
        this.list.push(this.inputValue)
      },
      remvoe: function (index) {
        this.list.splice(index, 1)
      },
      clear: function () {
        this.list = [];
      }

    },

  })
</script>

</html>

index.css


* {
    padding: 0;
    margin: 0;
}

#todoapp {
    width: 300px;
    margin: 5px auto;
    box-shadow: 0px 3px 10px 2px rgba(0,0,0,.1);

}

.biaoti {
    font:normal 200 34px '微软雅黑' ;
    color:  rgb(219, 82, 82);
    text-align: center;
    padding-top:100px ;
    padding-bottom: 10px;
}
.new-todo{
    width: 100%;
    height: 40px;
    padding-left:10px;
    color: rgb(88, 88, 88);
    box-sizing:border-box;
    border: 1px solid rgb(236, 236, 236);/*这里之前宽写成100%就出现对不齐的问题*/
}
.new-todo:focus{
    outline: none;
}
.footer{
    position: relative;
    width:100%;
    height: 40px;
    box-sizing:border-box; /*border-box你想要设置的边框和内边距的值是包含在width内的.不包含margin*/
    border: 1px solid rgb(236, 236, 236);
    background-color: white;

}

.footer span{
    font-size: 12px;
    color: rgb(131, 131, 131);
    float: left;
    line-height: 40px;
}
.left{
    margin-left: 10px;
}
.right{
    margin-left: 170px;
}
.todo{
    list-style: none;
    font-size: 14px;
    font-family: '微软雅黑';
    color: rgb(88, 88, 88);
    box-sizing:border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 1px solid rgb(236, 236, 236);
    background-color: white;
}
.view{
    position: relative;
    margin-left:10px ;
}

.view label{
    width: 200px;
    height: 40px;
    position: absolute;
    overflow: hidden;  /* 超出的文本隐藏*/
    text-overflow: ellipsis;   /* 溢出用省略号显示*/
    white-space:nowrap;   /* 溢出不换行*/
}
.destroy{
    position: absolute;
    right: 10px;
    top:9px;
    font-size: 12px;
    font-family: '微软雅黑';
    outline:none;
    border: 1px solid rgb(236, 236, 236);
    color: rgb(255, 111, 111);
    display: none;
}
.view:hover .destroy{         /*这里的.destroy和前面的要有空格,不然奏效*/
    display: block;
}
.left strong{
    font-weight: 400;
}
.footer button{
    position: absolute;
    right: 10px;
    top: 9px;
    background-color: white;
    border: 0px;
    outline:none;/*去掉选中按钮是边框的颜色*/
    font-size: 12px;
    font-family: '微软雅黑';
    color: rgb(131, 131, 131);
}

标签:vue,color,list,rgb,236,font,border,记事本
来源: https://www.cnblogs.com/zhuhukang/p/15831890.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有