Vue.js学习笔记四——小demo

最新推荐文章于 2023-03-08 16:54:54 发布

武汉小喽啰

最新推荐文章于 2023-03-08 16:54:54 发布

阅读量213

点赞数

分类专栏： # vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/93238592

版权

vue 专栏收录该内容

46 篇文章 8 订阅

订阅专栏


<!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>
<!-- 1. 导入Vue的包 -->
<script src="./lib/vue_2.6.1.js"></script>
<link rel="stylesheet" href="./lib/bootstrap.css"></link>
</head>
<body>
<!-- 将来 new 的Vue实例，会控制这个元素中的所有内容 -->
<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"/></label>
<label>搜索：<input type="text" class="form-control" v-model="keywords"/></label>
<input type="button" value="添加" class="btn btn-primary" @click="add()"/>
</div>
</div>
<!-- 表格 -->
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>ctime</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 循环的数组直接来自于data域 -->
<!--
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td v-text="item.name"></td>
<td v-html="item.ctime"></td>
<td> <a href="##" @click.prevent="del(item.id)"> 删除 </a> </td>
</tr>
-->
<!-- 循环的数组来自于动态的数据 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td v-text="item.name"></td>
<td v-html="item.ctime"></td>
<td> <a href="##" @click.prevent="del(item.id)"> 删除 </a> </td>
</tr>
</tbody>
</table>
</div>
<script>
// 2. 创建一个Vue的实例
// 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数
new Vue({
el:'#app', // 表示，当前我们new的这个Vue实例，要控制页面上的哪个区域
data:{ // data属性中，存放的是el中要用到的数据
msg:'欢迎学习Vue', // 通过Vue提供的指令，很方便的就能把数据渲染到页面上
id:'',
name:'',
keywords:'',
list:[
{id:'1001',name:'张三',ctime:new Date()},
{id:'1002',name:'李四',ctime:new Date()},
{id:'1003',name:'王五',ctime:new Date()}
]
},
methods:{
add(){
this.list.push({id:this.id,name:this.name,ctime:new Date()});
this.id=this.name='';
},
del(id){
// 方法一：利用some函数得到索引值
// this.list.some((item,i) => {
// if(item.id === id){
// this.list.splice(i,1);
// return true;
// }
// });
// 方法二：利用findIndex方法获取索引值
var index = this.list.findIndex((item) => {
if(item.id === id){
return true;
}
});
this.list.splice(index,1);
},
search(keywords){
// 定义一个新数组 传统方式
// var newList = [];
// this.list.forEach(item => {
// if(item.name.indexOf(keywords) != -1){
// newList.push(item);
// }
// });
// return newList;
// ES6 新方法
return this.list.filter(item => {
if(item.name.includes(keywords)){
return item;
}
});
}
}
});
// 注意：forEach some filter findIndex 这些都属于数组的新方法，都会对数组中的每一项进行遍历，执行相关的操作
// 在ES6中，为字符串提供了一个新方法，叫string。prototype.includes('要包含的字符串')，如果包含返回true
</script>
</body>
</html>