三、通过Vue基础属性做一个Table的增加、删除、姓名音位吗查询
html头文件包括css，和vue.js的文件的引用
解说：这是一段html头文件里面有vue的引用和css来控制app的宽度，table的宽度和（tr和td）行和列的样式，颜色，还有添加按钮的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
<style>
#app {
width: 800px;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: cornflowerblue;
color: white
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid #000;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid #000;
margin-bottom: 10px;
}
</style>
</head>
<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>
因为<a>标签使用了锚点所以使用单机事件的阻止事件即@click.prevet
<tr v-if="list.length===0"><td colspan="5">未获取到用户数据</td></tr> 如果list中的数据为0条数据即证明了table中没有数据了
<div id="app">
<div class="add">
用户名：
<input type="text" v-model="name">
<button @click="addUser" :disabled="name==''" >添加</button>
</div>
<div class="add">
用户名：
<input type="text" placeholder="请输入要搜索的姓名" @input="search($event)">
</div>
<div>
<table class="tb">
<tr>
<th>索引</th>
<th>编号</th>
<th>用户名</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<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>
<tr v-if="list.length===0">
<td colspan="6">未获取到用户数据</td>
</tr>
</table>
</div>
</div>
javaScript代码即也是vue代码
解说:el是Vue组件的id，data：Vue的数据区1list：是集合对象，2name：是字符串，3id：整型常量，4timeouter:是字符串，5method：方法体
5.1）addUser是方法体中新增用户方法，5.2）deleteUser是方法体中的删除用户方法，5.3）search是方法体中的姓名音位吗查询方法
<script>
var vm = new Vue({
el: "#app",
data: {
list: [
{
id: 1,
name: "Synjones",
date: new Date(),
isShow: true,
isChecked: false
},
{
id: 2,
name: "Weilai2570019",
date: new Date(),
isShow: true,
isChecked: false
},
{
id: 3,
name: "Xingfuyijiaren",
date: new Date(),
isShow: true,
isChecked: false
},
],
name: '',
id: 4,
timeouter: null
},
methods: {
addUser() {
if (this.name != "") {
this.list.push({
id: this.id++,
name: this.name,
date: new Date(),
isShow: true,
isChecked: false
})
this.name = '';
}
},
deleteUser(index) {
if (confirm("是否确认删除")) {
this.list.splice(index, 1);
}
},
search(e) {
clearTimeout(this.timeouter);
this.timeouter = setTimeout(() =>{
this.list.forEach(m => m.isShow = true);
var searchText = e.target.value.toUpperCase();
var filterList = this.list.filter(m => !m.name.toUpperCase().includes(searchText));
filterList.forEach(element => {
element.isShow = false;
});
}, 500)
}
},
});
</script>
html尾带码
解说：body和html结束标记
</body>
</html>
在ie浏览器中初始图片如下图
点击添加增加4条记录
删除用户名9，10两条记录
查找姓名有9字的记录
三、通过Vue基础属性做一个Table的增加、删除、姓名音位吗查询的更多相关文章
- 【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- 小白也能看懂的Redis教学基础篇——做一个时间窗限流就是这么简单
不知道ZSet(有序集合)的看官们,可以翻阅我的上一篇文章: 小白也能看懂的REDIS教学基础篇--朋友面试被SKIPLIST跳跃表拦住了 书接上回,话说我朋友小A童鞋,终于面世通过加入了一家公司.这 ...
- DW 做一个table表 对单元格进行合并
编辑前的代码 <body> <table width="500" border="0" bgcolor='#000000' backgroun ...
- 三、vue基础--表单绑定
表单输入绑定:可以一起使用以下修饰符,都是在v-model里面使用的,有input,radio,textrea,select中都可以使用绑定 1.单选按钮,代码如下: <div id='app' ...
- table动态增加删除
基于网上代码修改实现动态添加表数据行 <!DOCTYPE html> <html lang="cn"> <html> <head> ...
- 第三章、vue基础精讲
3.1VUE实例 组件:全局组件,局部组件,vue的每个组件也是一个实例,有自己的实例属性和实例方法. 在console中调试vue,vm为vue的实例,凡是以$开头的都是vue的实例属性或者vue的 ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- 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 ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
随机推荐
- Spring ApplicationContext 容器
Spring ApplicationContext 容器 Application Context 是 BeanFactory 的子接口,也被成为 Spring 上下文. Application Con ...
- WEB缓存系统之varnish代理以及健康状态检测配置
前文我们聊了下varnish的缓存项修剪配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12666406.html:今天我来说一下varnish作为代理服务 ...
- Spark Streaming 编程入门指南
Spark Streaming 是核心Spark API的扩展,可实现实时数据流的可伸缩,高吞吐量,容错流处理.可以从许多数据源(例如Kafka,Flume,Kinesis或TCP sockets)中 ...
- 微信小程序H5预览页面框架（二维码不隐藏）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 使用 python 创建&更改 word 文档
使用 python 修改 word 文档 说明:这个需求是老师想要一个自动识别 word 文档中指定位置的分数,并填入相应表格. 使用库 python-docx 的官方文档地址是:python-doc ...
- go的channel
go语言channel go语言提供了goroutine来实现并发,go语言也提供了channel来实现并发事件之间的通信. 传统的编程语言通过共享内存来实现通信,当多个线程同时操作一个共享变量的时候 ...
- python 函数--生成器
一.生成器函数: 常规定义函数,使用yield语句而不是return语句返回结果.yield语句一次返回一个结果. 好处在于,不会一下占用很多内存生成数据. 本质:就是一个迭代器. python中提供 ...
- 汇编刷题：屏幕显示 HOW ARE YOU!
DATA SEGMENT INFO DB 'HOW ARE YOU!$' DATA ENDS CODE SEGMENT ASSUME CS:CODE,DS:DATA START: MOV AX,DAT ...
- Python之 module安装
如出现这种错误 ModuleNotFoundError: No module named 'numpy' 这种错误通常不会出现,因为Python的模块,通常在你安装Python shell的时候,就已 ...
- String 对象-->substring() 方法
1.定义和用法 substring() 方法用于提取两个指定下标之间的字符. substring() 方法返回的子串包括 开始 处的字符,但不包括 结束 处的字符 语法: string.substri ...