1.在components下建一个

2.代码如下:

<template>
<!--1.业务是开始有一组数据,序号,姓名,性别,年龄,操作(删除)
    2.有三个输入框输入姓名,性别,年龄,(增加)
    3.当输入东西后,按了增加按钮,将增加一组数据到数组中
    4.当按了删除就会删除一组数据
    主要业务如上
    细节:(重点)
    1.加样式让表格对齐等,像表格的感觉,表格如何设置宽高
    2.引入背景图片方式
    3.增加时验证是否有值输入在输入框
    4.v-model双向绑定,导致增加到数组的数据也会发生变化,引用传递和值传递区别,利用对象复制,开辟新空间来存储
    5.===会验证值和类型,==只能验证值
    6.splice使用注意
    7.css样式的使用
--> 
<div>
   
  <center>
    <div class="top">
      *姓名:<input type="text" v-model="datas.name" placeholder="请输入姓名" >
      *性别<input type="text" v-model="datas.sex" placeholder="请输入性别">
       *年龄<input type="text" v-model="datas.age" placeholder="请输入年龄">
        <button @click="pushUsers" style="color:blue">增加</button>
   
    <table class="top-left" >
         <!-- <img src="~@/assets/timg.jpg"> 这是引入图片 -->
      <br>
      <!--
        1.这里加了<thead>表头</thead> <tbody>表体</tbody>,则不对齐
        2.其实可以认为th就是表头,td就是表体
        3.想要表格变大,就是让每个单元格变大,
        tr标签只能改变的是高度,td和th只能改变宽度
      -->
      <tr>
        <th v-for="site in heads" :key="site" class="th1">{{site}}</th>
      </tr>
      <tr v-for="(user,index) in users" :key="user">
        <td class="td1">{{index+1}}</td>
       <td class="td1">{{user.name}}</td>
       <td class="td1">{{user.sex}}</td>
       <td class="td1">{{user.age}}</td>
       <td class="td1"><button @click="deleteUsers(index)" style="color:blue">删除</button></td>
      </tr>
    
  </table>
    </div>
  </center>
</div>
</template>
<script>
export default{
  data(){
    return {
      heads:['序号','姓名','性别','年龄','操作'],
      datas:{name:'',sex:'',age:''},
      users:[
        {name:'张三',sex:'男',age:'22'},
        {name:'李四',sex:'女',age:'24'},
        {name:'小何',sex:'男',age:'25'}
      ]
    }
    
  },
  
  methods:{
    pushUsers(){
      //这个要好好理解一下,这里目的是把datas对象复制,就是开辟个新空间。
      //为啥具体要这步骤呢,
      //1.当你不加的时候,当你增加了一个对象后,你改变输入框的值,数组中增加的对象的值也会跟着改变,因为数组和对象都是引用传递
      //这里引用传递,相当就是我们一直是给一个内存地址赋值,所以才会跟着联改。引用传递:保存的是引用值(还是一个地址),值传递保存的是一个数据
      //进行了一些表单验证
      if(this.datas.name.trim()===""){
          window.alert('请输入姓名');
          return false;
      }
      if(this.datas.sex.trim()===''){
        window.alert('请输入性别');
        return false;
      }
      if(this.datas.age.trim()===''){
        window.alert('请输入年龄');
        return false;
      }
      let copy =Object.assign({},this.datas) 
      this.users.push(copy);
      console.log("name:"+this.datas.name+",sex:"+this.datas.sex+",age:"+this.datas.age)
    },
    deleteUsers(index){
      console.log("index:"+index)
      this.users.splice(index,1);
      //splice(index,num,item1,item2,item3....) 新增/删除/替换
      //index,代表数组新增/删除时的索引值,num:删除多少个,item:代表新增哪些/替换掉删除的哪些
    },
  }
}
</script>
<style>
.top-left th,td{
  border:1px solid #ccc;
  margin: auto;
  text-align: center;
  
 
  /* 1px:代表边框的宽度 ,solid:代表实线,dotted(点状),double(双线),dashed(虚线)
      这里 th和td间要加一个,号
      margin:外边距,auto:浏览器自动计算  ,也可以自己设置值
  text-align:文本对齐方式,left 左对齐,right:右对齐,center:居中
  */
}
.top{
 
            position: absolute;
            width: 700px;
            height:400px;
            border: 1px solid red;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto;
            font-size: 16px;
            color: blue;
            /* 引入背景图方式 */
            background: url('~@/assets/timg.jpg') center center no-repeat;
            background-size : 700px,200px;
        }
  .th1 {
      width: 80px;
  }
  .td1 {
      width: 80px;
  }
  
  tr{
    height: 80px;
  }
</style>

3..index.js下添加路由

4.效果如图:

vue小例子-01的更多相关文章

  1. Vue 小练习01

    有红, 黄, 蓝三个按钮, 以及一个200X200px的矩形box, 点击不同的按钮, box的颜色会被切换为指定的颜色 <!DOCTYPE html> <html lang=&qu ...

  2. Vue编写的todolist小例子

    Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...

  3. Vue.js的小例子--随便写的

    1.领导安排明天给同事们科普下vue 2.简单写了两个小例子 3.话不多说直接上代码 <!DOCTYPE html> <html> <head> <meta ...

  4. 基于vue-cli、elementUI的Vue超简单入门小例子

    - 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...

  5. JavaScript小例子:复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  6. oracle数据库包package小例子

    为了把某一个模块的函数.存储过程等方便查询维护,可以把它们打到一个包里.下面给出一个简单的小例子. 1.创建包头 create or replace package chen_pack is func ...

  7. spring-mvc-两个个小例子

    1.用Eclipse创建一个工程,命名为spring2.0 并添加相应的jar包(我用的是4.0.5的版本)到 lib 包下: spring-webmvc-4.0.5.RELEASE.jar spri ...

  8. Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期

    学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看 ...

  9. vuex2.0+两个小例子

    首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各核心概念的理解. 废话少说,直接上干货.这是官网上的一 ...

随机推荐

  1. 逻辑卷管理(LVM)-迁移

    逻辑卷管理(LVM)-迁移 更换卷组中逻辑卷中的一块硬盘流程:1确保卷组剩余空间大于需要更换的空间(缩减或添加添加新空间)-2迁移-3从卷组删除-4删除物理卷 #移除sdc1 1.查看卷组可用空间是否 ...

  2. C#面向对象详解

    //封装就是将数据或函数等集合在一个个的单元中,我们称之为类,被封装的对象通常被称为抽象数据类型, //封装的意义在于保护或防止代码被我们无意中破坏, //封装既可以封装成员变量,又可以封装成员方法, ...

  3. opencv —— erode、dilate 腐蚀与膨胀

    腐蚀与膨胀是形态学滤波.其中,腐蚀是最小值滤波,膨胀是最大值滤波,即分别选取内核中的最小值与最大值赋值给锚点.若内核为 N×1 或 1×N 形状,可用于横纵方向直线检测. 膨胀:dilate 函数 v ...

  4. 吴裕雄--天生自然HADOOP操作实验学习笔记:使用hive操作hbase

    实验目的 熟悉hive和hbase的操作 熟悉hadoop.hbase.hive.zookeeper的关系 熟练大数据环境的搭建 学会分析日志排除问题 实验原理 1.hive整合hbase原理 前面大 ...

  5. 将IMAGE转为PDF后上传

    using iTextSharp.text; using iTextSharp.text.pdf; /// <summary> /// 将IMAGE转为PDF后上传 /// </su ...

  6. gulp常用插件之gulp-if使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-if这是一款条件判断插件. 注意:与gulp-if一起使用时,表现不佳的插件通常会变得更糟.通常,修复不在gulp-if中. 注意:与l ...

  7. Building a Space Station POJ - 2031 三维最小生成树,其实就是板子题

    #include<iostream> #include<cmath> #include<algorithm> #include<cstdio> usin ...

  8. svn error: "Previous operation has not finished; run 'cleanup' if it was interrupted"

    出现这种问题,有几个原因 1.本身文件确实是锁住了 2.之前clean up 过很多次,但是每次都可能以失败告终,造成work queue存在缓存队列 3.svn lock 有lock记录 以下是简单 ...

  9. ovs安装教程

    原文链接:https://www.cnblogs.com/goldsunshine/p/10331606.html Open vSwitch系列之二 安装指定版本ovs   Open vSwitch系 ...

  10. Milestone

    为什么开博客?     事情要从一只蝙蝠说起...       准备用博客做什么?     记录自己在开发中遇到的issue以及解决的思路:记录一些读书笔记以便温故:练习如何制造仪式感,ect.   ...