三、通过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做一个爱心. 前期预备知识: ...
随机推荐
- 简单记录下RestTemplate 中postForObject调用例子
学无止境! 今天无意中做了下RestTemplate调用demo,简单的尝试了下一个项目调用另一个项目接口示例 在A项目中创建可访问controller 然后在B项目中进行调用 调用成功
- 获取data 数据
export function getData(el, name, val) { const prefix = 'data-' if (val) { return el.setAttribute(pr ...
- C#通用类库整理--序列化类
程序员在编写应用程序的时候往往要将程序的某些数据存储在内存中,然后将其写入某个文件或是将它传输到网络中的另一台计算机上 以实现通讯.这个将程序数据转化成能被存储并传输的格式的过程被称为"序列 ...
- python--Django（后台管理模块）
一.准备工作 1.创建应用 python manage.py startapp test 2.定义模型类 (1)打开刚创建的app目录test,打开models.py文件 (2)代码如下 from d ...
- spring03
学习了spring的数据源的使用以及spring的作用域引入外部属性文件 对应的bean的xml文件和properties文件如下 <?xml version="1.0" e ...
- Android AndroidManifest.xml详解
AndroidManifest.xml简述: AndroidManifest.xml 是每个android程序中必须的文件.它位于整个项目的根目录,描述了package中暴露的组件(activitie ...
- 教你爬取腾讯课堂、网易云课堂、mooc等所有课程信息
本文的所有代码都在GitHub上托管,想要代码的同学请点击这里
- SpringMVC框架详细教程(六)_HelloWorld
HelloWorld 在src下创建包com.pudding.controller,然后创建一个类HelloWorldController: package com.pudding.controlle ...
- Web开发与设计之Google兵器谱-Web开发与设计利器
Web开发与设计之Google兵器谱-Web开发与设计利器 博客分类: Java综合 WebGoogleAjaxChromeGWT 笔者是个Java爱好者也是用Java进行web开发的工作者.平时笔者 ...
- AJ学IOS 之CoreLocation反地理编码小Demo输入经纬度得到城市
AJ分享,必须精品 一:效果 输入经纬度,可以得到相应的地名 二:思路 跟地里编码差不多 1.获取用户输入的经纬度 2.根据用户输入的经纬度创建CLLocation对象 3.根据CLLocation对 ...