利用vue,bootstrap制作简单的列表展示，添加和删除功能

最新推荐文章于 2024-05-15 00:21:36 发布

哈哈hyc

最新推荐文章于 2024-05-15 00:21:36 发布

阅读量1.2k

点赞数

分类专栏：前端前端——vue 文章标签： vue 前端 bootstarp 列表

本文链接：https://blog.csdn.net/erdfty/article/details/88536343

版权

前端同时被 2 个专栏收录

64 篇文章 4 订阅

订阅专栏

前端——vue

22 篇文章 0 订阅

订阅专栏

实现效果如下图所示：

添加按钮直接添加

删除按钮可以删除

其中的知识点有：bootstrap运用，v-model，@keyup，@click，全局过滤器，私有过滤器，自定义全局按键修饰符，Vue.directive() 定义全局指令，自定义一个颜色的指令等一些知识点，大家可以参考参考，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
	<div id="app">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">添加品牌</h3>
			</div>
			<div class="panel-body form-inline">
				<label>
					Id:
					<input type="text" class="form-control" v-model="id">
				</label>

				<label>
					Name:
					<input type="text" class="form-control" v-model="name" @keyup.enter="add">
				</label>

				<input type="button" value="添加" class="btn btn-primary" @click="add">

				<label>
					搜索名称关键字:
					<input type="text" class="form-control" v-model="keywords" id ="search" v-focus v-color="'blue'">
				</label>

			</div>
		</div>


		<table class="table table-bordered table-hover table-striped">
			<thead>
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th>Ctime</th>
					<th>Operation</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in search(keywords)" :key="item.id">
					<td>{{ item.id }}</td>
					<td v-text="item.name"></td>
					<td>{{ item.ctime | dateFormat}}</td>
					<td>
						<a href="" @click.prevent="del(item.id)">删除</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div id="app2">
		<h3 class="text-danger" v-fontweight="600" v-fontsize="30">{{ dt | dateFormat }}</h3>
	</div>


	<script>
		// 全局的过滤器，进行时间的格式化
		Vue.filter('dateFormat', function(dateStr, pattern="") {
			var dt = new Date(dateStr)

			//  yyyy-mm-dd
			var y = dt.getFullYear()
			var m = dt.getMonth() + 1
			var d = dt.getDate()

			// return y + '-' + m + '-' + d

			if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
				return `${y}-${m}-${d}`
			} else {
				var hh = dt.getHours()
				var mm = dt.getMinutes()
				var ss = dt.getSeconds()

				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
			}
			
		})

		//自定义全局按键修饰符
		// Vue.config.keyCodes.f2 = 113

		// 使用  Vue.directive() 定义全局的指令
		Vue.directive('focus', {
			bind: function (el) {  //每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
				// el.focus()
			},
			inserted: function (el) {  //inserted 表示元素 插入到DOM中的时候，会执行insterted函数
				el.focus()

			},
			updated: function () {  //当VNode更新的时候，会执行updated，可能会触发多次

			},
		})

		//自定义一个颜色的指令
		Vue.directive('color', {
			bind: function(el, binding){
				el.style.color = binding.value

			}
		})


		//创建 Vue 实例，得到ViewModel
		var vm = new Vue({
			el: '#app',
			data:{
				id: '',
				name: '',
				keywords: '',  //搜索关键字
				list: [
					{ id: 1, name: '奔驰', ctime: new Date() },
					{ id: 2, name: '宝马', ctime: new Date() }
				]
			},
			methods:{
				add(){
					// console.log(this.id);
					// console.log(this.name);
					var car = { id: this.id, name: this.name, ctime: new Date() }
					this.list.push(car)
					this.id = this.name = ''
				},
				del(id){  //根据id删除数据

					// 方法一
					/*this.list.some((item, i)=>{
						if(item.id === id){
							this.list.splice(i, 1)
							return true;
						}
					})*/

					//方法二
					var index = this.list.findIndex(item => {
						if(item.id === id){
							return true;
						}
					})

					// console.log(index);
					this.list.splice(index, 1)
				},
				search(keywords) {

					//方法一
					/*var newList = []
					this.list.forEach( item=> {
						if(item.name.indexOf(keywords) != -1) {
							newList.push(item)
						}
					})
					return newList*/

					//方法二
					return this.list.filter(item => {
						// if(item.name.indexOf(keywords) != -1)
						if(item.name.includes(keywords)){
							return item
						}
					})
					return newList
				}
			}
		})

		var vm2 = new Vue({
			el: "#app2",
			data: {
				dt: new Date()
			},
			methods: {},
			filters: {  //定义私有过滤器   过滤器有两个 条件  【过滤器名称 和 处理函数】
				dateFormat:function(dateStr, pattern){
					var dt = new Date(dateStr)

					//  yyyy-mm-dd
					var y = dt.getFullYear()
					var m = (dt.getMonth() + 1).toString().padStart(2, '0')
					var d = dt.getDate().toString().padStart(2, '0')

					// return y + '-' + m + '-' + d

					if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
						return `${y}-${m}-${d}`
					} else {
						var hh = dt.getHours().toString().padStart(2, '0')
						var mm = dt.getMinutes().toString().padStart(2, '0')
						var ss = dt.getSeconds().toString().padStart(2, '0')

						return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~`
					}
				}
			},
			directives:{ //自定义私有指令
				'fontweight': {  //设置字体粗细的
					bind: function(el, binding){
						el.style.fontWeight = binding.value

					}
				},
				'fontsize': function(el, binding){
					el.style.fontSize = parseInt(binding.value) + 'px'
				}
			}

		})

	</script>
</body>
</html>

演示网站效果地址：http://hyc5.cn/list.html

哈哈hyc

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
利用vue,bootstrap制作简单的列表展示，添加和删除功能

实现效果如下图所示：添加按钮直接添加删除按钮可以删除其中的知识点有：bootstrap运用，v-model，@keyup，@click，全局过滤器，私有过滤器，自定义全局按键修饰符，Vue.directive() 定义全局指令，自定义一个颜色的指令等一些知识点，大家可以参考参考，代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="e...
复制链接

扫一扫