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. 纪中21日c组T2 2117. 【2016-12-30普及组模拟】台风

    2117. 台风 (File IO): input:storm.in output:storm.out 时间限制: 1000 ms  空间限制: 262144 KB  具体限制 Goto Proble ...

  2. P1055 ISBN号码(getline(cin,s); printf("%s",str); )

    题目描述 每一本正式出版的图书都有一个 ISBN 号码与之对应,ISBN 码包括 9 位数字.1 位识别码和 3 位分隔符,其规定格式如 x-xxx-xxxxx-x,其中符号 - 就是分隔符(键盘上的 ...

  3. 如何在vue-cli中使用vuex(配置成功

    前言 众所周知,vuex 是一个专为 vue.js 应用程序开发的状态管理模式,在构建一个中大型单页应用中使用vuex可以帮助我们更好地在组件外部管理状态.而vue-cli是vue的官方脚手架,它能帮 ...

  4. 免费免驱动从网上截取正版音乐与MV及视频

    在QQ Music里听到Alan Walker 的 Songs,想download,但是要绿钻.MV也有QQ音乐的logo,这下有了一个绝佳的办法! Tools:1.Gihosoft TubeGet  ...

  5. SSH远程登录、.sh文件后缀运行、l l命令结果说明、VIM模式切换

    目录 SSH远程登录..sh文件后缀运行.l l命令结果说明.VIM模式切换 SSH远程安全登录 .sh文件后缀运行 l l命令结果说明 VIM模式切换 SSH远程登录..sh文件后缀运行.l l命令 ...

  6. 【pattern】设计模式(2) - 模版方法模式

    前言 一晃一年又过了,还是一样的渣. 一晃2周又过去了,还是没有坚持写博客. 本来前2天说填一下SQL注入攻击的坑,结果看下去发现还是ojdbc.jar中的代码,看不懂啊.这坑暂时填不动,强迫在元旦最 ...

  7. 【算法】用两个栈来实现一个队列,完成队列的Push和Pop操作。 队列中的元素为int类型。

    public class Solution { Stack<Integer> stack1 = new Stack<Integer>(); Stack<Integer&g ...

  8. 3、const与constexpr

    初遇到constexpr真的是有点懵比,看了很多博客也没看懂,不知道是我太笨,还是别人写的太深奥?总之经过一番折腾算是入门了.一下是我个人总结,有不对的地方望指出. 一.学习const与constex ...

  9. 回文串--Manacher算法(模板)

    用途:在O(n)时间内,求出以每一个点为中心的回文串长度. 首先,有一个非常巧妙的转化.由于回文串长度有可能为奇数也有可能为偶数,说明回文中心不一定在一个字符上.所以要将字符串做如下处理:在每两个字母 ...

  10. python爬虫----爬取阿里数据银行websocket接口

    业务需求:爬取阿里品牌数据银行的自定义模块==>>>人群透视==>>>查看报告==>>数据 发现:数据通过websocket接口传递,此类型接口的详细理 ...