html头文件包括css，和vue.js的文件的引用

解说：这是一段html头文件里面有vue的引用和css来控制app的宽度，table的宽度和（tr和td）行和列的样式，颜色，还有添加按钮的样式。

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <title>Document</title>
  7.      <script src="https://vuejs.org/js/vue.min.js"></script>
  8.      <style>
  9.          #app {
  10.              width: 800px;
  11.              margin: 10px auto;
  12.          }
  13.          .tb {
  14.              border-collapse: collapse;
  15.              width: 100%;
  16.          }
  17.          .tb th {
  18.              background-color: cornflowerblue;
  19.              color: white
  20.          }
  21.          .tb td,
  22.          .tb th {
  23.              padding: 5px;
  24.              border: 1px solid #000;
  25.              text-align: center;
  26.          }
  27.          .add {
  28.              padding: 5px;
  29.              border: 1px solid #000;
  30.              margin-bottom: 10px;
  31.          }
  32.      </style>
  33.  </head>
  34.  <body>

html中间实体代码有:用户名：文本框【添加】

用户名：【请输入要搜索的用户名】

解说：<button @click="addUser" v-bind:disabled="name=='' ">添加</button>【添加】增加点击事件addUser，当用户名文本空为空时【添加】按钮曾不可点击状态 ，当用户名文本框不为空时【添加】按钮可点击状态

因为Vue中的v-for 和 v-if指令不能出现在一个html语句中所以就是用了模板<template>将v-for和v-if这两个指令分开。

<template v-for="(item,index) in list">

<tr v-if ="item.isShow">

<td>{{index}}</td>

<td>{{item.id}}</td>

<td>{{item.name}}</td>

<td>{{item.date}}</td>

<td><a href="#" @click.prevent="deleteUser(index)">删除</a></td>

</tr>

</template>

  1. 因为<a>标签使用了锚点所以使用单机事件的阻止事件即@click.prevet

<tr v-if="list.length===0"><td colspan="5">未获取到用户数据</td></tr> 如果list中的数据为0条数据即证明了table中没有数据了

  1.  <div id="app">
  2.          <div class="add">
  3.              用户名：
  4.              <input type="text" v-model="name">
  5.              <button @click="addUser" :disabled="name==''" >添加</button>
  6.          </div>
  7.          <div class="add">
  8.              用户名：
  9.              <input type="text" placeholder="请输入要搜索的姓名" @input="search($event)">
  10.          </div>
  11.          <div>
  12.              <table class="tb">
  13.                  <tr>
  14.                      <th>索引</th>
  15.                      <th>编号</th>
  16.                      <th>用户名</th>
  17.                      <th>创建时间</th>
  18.                      <th>操作</th>
  19.                  </tr>
  20.                  <template v-for="(item,index) in list">
  21.                      <tr v-if="item.isShow">
  22.                          <td>{{index}}</td>
  23.                          <td>{{item.id}}</td>
  24.                          <td>{{item.name}}</td>
  25.                          <td>{{item.date}}</td>
  26.                          <td>
  27.                              <a href="#" @click.prevent="deleteUser(index)">删除</a>
  28.                          </td>
  29.                      </tr>
  30.                  </template>
  31.                  <tr v-if="list.length===0">
  32.                      <td colspan="6">未获取到用户数据</td>
  33.                  </tr>
  34.              </table>
  35.          </div>
  36.      </div>

javaScript代码即也是vue代码

解说:el是Vue组件的id，data：Vue的数据区1list：是集合对象，2name：是字符串，3id：整型常量，4timeouter:是字符串，5method：方法体

5.1）addUser是方法体中新增用户方法，5.2）deleteUser是方法体中的删除用户方法，5.3）search是方法体中的姓名音位吗查询方法

  1.  <script>
  2.          var vm = new Vue({
  3.              el: "#app",
  4.              data: {
  5.                  list: [
  6.                      {
  7.                          id: 1,
  8.                          name: "Synjones",
  9.                          date: new Date(),
  10.                          isShow: true,
  11.                          isChecked: false
  12.                      },
  13.                      {
  14.                          id: 2,
  15.                          name: "Weilai2570019",
  16.                          date: new Date(),
  17.                          isShow: true,
  18.                          isChecked: false
  19.                      },
  20.                      {
  21.                          id: 3,
  22.                          name: "Xingfuyijiaren",
  23.                          date: new Date(),
  24.                          isShow: true,
  25.                          isChecked: false
  26.                      },
  27.                  ],
  28.                  name: '',
  29.                  id: 4,
  30.                  timeouter: null
  31.              },
  32.              methods: {
  33.                  addUser() {
  34.                      if (this.name != "") {
  35.                          this.list.push({
  36.                              id: this.id++,
  37.                              name: this.name,
  38.                              date: new Date(),
  39.                              isShow: true,
  40.                              isChecked: false
  41.                          })
  42.                          this.name = '';
  43.                      }
  44.                  },
  45.                  deleteUser(index) {
  46.                      if (confirm("是否确认删除")) {
  47.                          this.list.splice(index, 1);
  48.                      }
  49.                  },
  50.                  search(e) {
  51.                      clearTimeout(this.timeouter);
  52.                      this.timeouter = setTimeout(() =>{
  53.                          this.list.forEach(m => m.isShow = true);
  54.                          var searchText = e.target.value.toUpperCase();
  55.                          var filterList = this.list.filter(m => !m.name.toUpperCase().includes(searchText));
  56.                          filterList.forEach(element => {
  57.                              element.isShow = false;
  58.                          });
  59.                      }, 500)
  60.                  }
  61.              },
  62.          });
  63.      </script>

html尾带码

解说：body和html结束标记

  1.  </body>
  2.  </html>

在ie浏览器中初始图片如下图

点击添加增加4条记录

删除用户名9，10两条记录

查找姓名有9字的记录

三、通过Vue基础属性做一个Table的增加、删除、姓名音位吗查询的更多相关文章

  1. 【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  2. 小白也能看懂的Redis教学基础篇——做一个时间窗限流就是这么简单

    不知道ZSet(有序集合)的看官们,可以翻阅我的上一篇文章: 小白也能看懂的REDIS教学基础篇--朋友面试被SKIPLIST跳跃表拦住了 书接上回,话说我朋友小A童鞋,终于面世通过加入了一家公司.这 ...

  3. DW 做一个table表 对单元格进行合并

    编辑前的代码 <body> <table width="500" border="0" bgcolor='#000000' backgroun ...

  4. 三、vue基础--表单绑定

    表单输入绑定:可以一起使用以下修饰符,都是在v-model里面使用的,有input,radio,textrea,select中都可以使用绑定 1.单选按钮,代码如下: <div id='app' ...

  5. table动态增加删除

    基于网上代码修改实现动态添加表数据行 <!DOCTYPE html> <html lang="cn"> <html> <head> ...

  6. 第三章、vue基础精讲

    3.1VUE实例 组件:全局组件,局部组件,vue的每个组件也是一个实例,有自己的实例属性和实例方法. 在console中调试vue,vm为vue的实例,凡是以$开头的都是vue的实例属性或者vue的 ...

  7. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  8. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  9. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

随机推荐

  1. 【mysql】mysql优化

    一,表设计 1.1. E-R(entity relation)实体关系图 长方形 实体 表 椭圆形 属性 字段 菱形 关系 一对一 多对一 属于 多对多 1.2. 三范式标准 原子性 个人信息 省市县 ...

  2. 【php】php操作MySQL数据库

    一.操作步骤: 1. 连接MySQL数据库并判断是否连接成功2. 选择数据库3. 设置字符集4. 准备SQL语句5. 向MySQL服务发送SQL语句6. 解析处理结果集7. 释放结果集,关闭数据库连接 ...

  3. 这个案例写出来，还怕跟面试官扯不明白 OAuth2 登录流程？

    昨天和小伙伴们介绍了 OAuth2 的基本概念,在讲解 Spring Cloud Security OAuth2 之前,我还是先来通过实际代码来和小伙伴们把 OAuth2 中的各个授权模式走一遍,今天 ...

  4. linux 配置 python3 CGI

    文章更新于:2020-03-04 注1:安装 python 参见: python 的安装使用和基本语法 注2:配置 web 环境参见: Windows&linux使用集成环境搭建 web 服务 ...

  5. django、celery异步发邮件

    django.celery异步发邮件 django自带的send_mail发邮件功能执行发邮件功能会因为网络的原因造成花费的时间过长,为了解决这个问题,可以用celery + redis代替 安装包: ...

  6. Linux bash篇（四 命令）

    1.一次执行多个命令        ; eg: ls -al ; touch data.txt 2.根据情况执行命令       &&     || cmd1 && c ...

  7. 力软敏捷框架集成布局插件（ce-layout）

    最近用力软的框架觉得框架在布局这块不是很友好特别是对像css不是很好的程序员来说,大部分大家都是后端程序员. 所以决定集成一个和力软敏捷框架风格比较一致的布局插件进来 插件ce-layout ,下载地 ...

  8. mysql> 12 simple but staple commands

    Edit at:  2019-12-28 16:52:42 1.mysql -u+username -p+password  --> connect mysql 2.use databasena ...

  9. 开源运动的"圣经"——《大教堂与集市》读书笔记

    作者:Eric S. Raymond 一.黑客圈简史 1.早期 (1)MIT 与 ITS "黑客"一词大约就起源于MIT的计算机文化. 从PDP-1时代开始,黑客文化的命运就和DE ...

  10. 使用Scanner接受用户键盘输入的值

    第一步导入Scanner import java.util.*; 第二步创建Scanner对象 Scanner input = new Scanner(System.in); 第二步创建Scanner ...