vue设置input与按钮在一行_vue+css：制作todo事项（待办事项）的代码解析

1 效果图：

2 环境：

======

2.1 谷歌浏览器：

强调这一点，是因为css设置中，并没有对浏览器兼容问题进行代码设置，主要是突出重点。

2.2 微软编辑器vscode：

用于代码编写。

3 知识点：

===代码注释中有说明===

3.1 html基础知识。

3.2 css基础知识。

3.3 vue基础知识。

===开始===

4 html基础框架：

          vue-note       ......             ......            ......      

5 两个文件：

6 vue-note.html代码：

          vue-note

vue note txt

{{index+1}}. {{item}}

{{this.list.length}} items left Clear

7 index.css代码：

/*----第1步：整体设置----*//*这是设置默认的内外边距。因为浏览器标签自带的属性是不统一的，设置为0，为了兼容所有的浏览器。*/html,body {  margin: 0;  padding: 0;}body {  /*字体大小和样式*/  font: 14px Arial;  line-height: 1.4em;  /*网页整体的背景颜色*/  background: #0695ce;  /*字体的颜色，注意h1的标题字体颜色是单独设置的*/  /*color: #4d4d4d;*/  /*body大小设置，其实就是表格todo框的大小*/  min-width: 230px;  max-width: 550px;  margin: 0 auto;}/*按钮设置：包括×按钮和clear按钮设置*/button {  margin: 0;  padding: 0;  border: 0;  background: none;  font-size: 100%;  vertical-align: baseline;  font-family: inherit;  font-weight: inherit;  color: inherit;  -webkit-appearance: none;  appearance: none;}/*----第2步：的设置，也是重点----*/#todoapp {  /*todoapp的box的背景颜色*/  background: #fff;  margin: 180px 0 40px 0;  position: relative;  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);}/*---第2-1步：头部分的文字标题名的设置*/#todoapp h1 {  position: absolute;  top: -160px;  width: 100%;  font-size: 60px;  font-weight: 100;  text-align: center;  /*文字颜色设置*/  color: rgba(175, 47, 47, .8);}/*----第2-2步：第一行输入框的设置---*//*输入框的placeholder文本设置*/#todoapp input::input-placeholder {  font-style: italic;  font-weight: 300;  color: gray;}/*输入框的边界框线设置*/:focus {  outline: 0;}/*第一行输入框设置，尤其是处于编辑状态下的*/.new-todo,.edit {  position: relative;  margin: 0;  width: 100%;  font-size: 24px;  font-family: inherit;  font-weight: inherit;  line-height: 1.4em;  border: 0;  color: inherit;  padding: 6px;  border: 1px solid #999;  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);  box-sizing: border-box;}/*第一行输入框的新的输入信息设置*/.new-todo {  padding: 16px;  border: none;  background: rgba(0, 0, 0, 0.003);  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);}/*----第2-3步：列表区域的设置---*/.main {  position: relative;  z-index: 2;  border-top: 1px solid #e6e6e6;}.todo-list {  margin: 0;  padding: 0;  list-style: none;  max-height: 420px;  overflow: auto;}.todo-list li {  position: relative;  font-size: 24px;  border-bottom: 1px solid #ededed;  height: 60px;  box-sizing: border-box;}.todo-list .view .index {  position: absolute;  color: gray;  left: 10px;  top: 20px;  font-size: 16px;}.todo-list li label {  word-break: break-all;  padding: 15px 15px 15px 60px;  display: block;  line-height: 1.2;  transition: color 0.4s;}.todo-list li.completed label {  color: #d9d9d9;  text-decoration: line-through;}.todo-list li .destroy {  display: none;  position: absolute;  top: 0;  right: 10px;  bottom: 0;  width: 40px;  height: 40px;  margin: auto 0;  font-size: 30px;  /*×→叉的飘过所在行的颜色*/  color: chartreuse;  margin-bottom: 11px;  transition: color 0.2s ease-out;}.todo-list li .destroy:hover {  /*×→叉的选中颜色*/  color: #f12113;}.todo-list li .destroy:after {  /*×→叉的符号*/  content: "×";}/*列表的每一行右边的×，当鼠标划过时的可变设置*/.todo-list li:hover .destroy {  display: block;}.todo-list li .edit {  display: none;}.todo-list li.editing:last-child {  margin-bottom: -1px;}/*----第2-4步：注脚区域的设置---*/.footer {  color: #777;  padding: 10px 15px;  height: 20px;  text-align: center;  border-top: 1px solid #e6e6e6;}.footer:before {  content: "";  position: absolute;  right: 0;  bottom: 0;  left: 0;  height: 50px;  overflow: hidden;  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,    0 17px 2px -6px rgba(0, 0, 0, 0.2);}/*注脚在左下的设置*/.todo-count {  float: left;  text-align: left;}.todo-count strong {  font-weight: 300;}.clear-completed,html .clear-completed:active {  float: right;  position: relative;  line-height: 20px;  text-decoration: none;  cursor: pointer;}/*clear的下划线设置*/.clear-completed:hover {  text-decoration: underline;}

8 主要是熟悉vue的单文件结构布局，指令：v-show和v-if区别，v-for复习；vue函数定义等。

==自己整理并分享出来===

喜欢的人，请点赞、关注、评论、转发和收藏。