案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
margin: auto;
width: 530px;
text-align: center;
}
.box table{
border-top: 1px solid skyblue;
width: 100%;
border-collapse: collapse;
}
.box th, td{
padding: 10px;
border: 1px solid skyblue;
height: 20px;
line-height: 20px;
}
.box th{
background-color: gold;
}
.box .book{
padding-bottom: 10px;
padding-top: 10px;
background-color: papayawhip;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div>
<h1>小小图书管理</h1>
<div class="book">
<div>
<label for="id">编号:</label>
<input type="text" id="id" v-model="id">
<label for="name">名称:</label>
<input type="text" id="name" v-model="name">
<button @click="addAndEditBook">提交</button>
</div>
</div>
</div>
<br>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
<td>
<a href="" @click.prevent="toEdit(item.id)">编辑</a>
<span>|</span>
<a href="" @click.prevent="toDel(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="../js/vue-development.js"></script>
<script>
let vm = new Vue({
el:"#app",
data(){
return{
id:"",
name:"",
flag:false,
books:[
{id:1,name:"三国",date:"2020-09-09"},
{id:2,name:"水糊传",date:"2020-09-09"},
{id:3,name:"红楼梦",date:"2020-09-09"},
{id:4,name:"平凡的世界",date:"2020-09-09"}
]
}
},
methods:{
addAndEditBook(e){
// this表示vm
if(this.flag){
// 如果flag是true 表示编辑
this.books.some(item=>{
if(this.id === item.id){
item.name = this.name;
return true;
}
});
this.flag = false;
}else{
// 如果flag是false 表示添加
let book = {id:this.id,name:this.name,date:"2020-09-09"};
this.books.push(book)
}
// 清空输入框
this.id = "";
this.name = "";
},
toEdit(id){
this.flag = true; // 当flag是true了,上面的表单表示编辑
let book = this.books.filter(item=>{
return item.id == id;
})
// 实现数据的回显
this.id = book[0].id;
this.name = book[0].name;
},
toDel(id){
let index = this.books.findIndex(item=>{
return item.id == id;
});
this.books.splice(index,1)
}
}
});
// vm.flag;
</script>
</body>
</html>
效果图:
js文件:
链接: https://pan.baidu.com/s/1xBrtZARjtCekDDXmPTVYqA 提取码: tv34 复制这段内容后打开百度网盘手机App,操作更方便哦
案例二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
ul>li{
list-style: none;
line-height: 30px;
}
</style>
</head>
<body>
<div id="app">
<h3>搜索列表</h3>
<div>
<h3>排序</h3>
<button>年龄↑</button>
<button>年龄↓</button>
<button>还原</button>
</div>
<label>
<input
type="text"
placeholder="请输入搜索的内容"
v-model="searchStr"
@keyup.enter="search"
>
</label>
<ul>
<li v-for="(item,index) in newPersons">
{{ index + 1 }} 姓名: {{ item.name }}, 性别: {{ item.sex }}, 年龄: {{ item.age }}, 手机号: {{ item.phone }}
</li>
</ul>
</div>
</div>
<script src="../js/vue-development.js"></script>
<script>
let vm = new Vue({
el:"#app",
data(){
return {
searchStr:"",
persons: [
{name: '张三', sex: '女', age: 19, phone: '18921212121'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李思思', sex: '男', age: 29, phone: '18921221121'},
{name: '张三', sex: '女', age: 19, phone: '18921212121'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李四', sex: '男', age: 10, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '李四', sex: '男', age: 59, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李五五', sex: '男', age: 29, phone: '18921221121'}
],
newPersons:[],
}
},
created(){
this.newPersons = this.persons;
},
methods:{
search(){
this.newPersons = this.persons.filter(p=>p.name.indexOf(this.searchStr) !== -1);
}
}
});
</script>
</body>
</html>
案例二优化(计算属性的使用)
计算属性:
就是根据data中已有数据,计算得到一个新的数据。
计算属性本质是一个方法
计算属性在定义时,当成一个方法来定义,在使用时,当成一个数据来使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
ul>li{
list-style: none;
line-height: 30px;
}
</style>
</head>
<body>
<div id="app">
<h3>搜索列表</h3>
<div>
<h3>排序</h3>
<!-- 2表示升序,1表示降序,0表示还原-->
<button @click="setOrder(2)">年龄↑</button>
<button @click="setOrder(1)">年龄↓</button>
<button @click="setOrder(0)">还原</button>
</div>
<label>
<input
type="text"
placeholder="请输入搜索的内容"
v-model="searchStr"
@keyup.enter="search"
>
</label>
<ul>
<li v-for="(item,index) in filterPersons">
{{ index + 1 }} 姓名: {{ item.name }}, 性别: {{ item.sex }}, 年龄: {{ item.age }}, 手机号: {{ item.phone }}
</li>
</ul>
</div>
</div>
<script src="../js/vue-development.js"></script>
<script>
let vm = new Vue({
el:"#app",
data(){
return {
searchStr:"",
persons: [
{name: '张三', sex: '女', age: 19, phone: '18921212121'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李思思', sex: '男', age: 29, phone: '18921221121'},
{name: '张三', sex: '女', age: 19, phone: '18921212121'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李四', sex: '男', age: 10, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '李四', sex: '男', age: 59, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李五五', sex: '男', age: 29, phone: '18921221121'}
],
orderTypes:0, // 0不排序,2表示升序,1表示降序
}
},
computed:{ // 在这里面就可以写计算属性了
filterPersons(){
// 取出数据 如果searchStr状态变了 计算属性会重新计算
let { searchStr,persons,orderTypes } = this; // ES6中的解析赋值
// copy原生的person
let arr = [...persons]
if(searchStr.trim()){
arr = this.persons.filter(p=>p.name.indexOf(searchStr) !== -1);
}
// 排序
if(orderTypes){
arr.sort((p1,p2)=>{
if(orderTypes === 1){
// 降序
return p2.age - p1.age;
}else{
// 升序
return p1.age - p2.age;
}
})
}
// 在模板中使用filterPersons这个数据,这个数据到底是什么值
// 看你这个方法中返回什么
return arr;
}
},
methods:{
setOrder(orderType){
this.orderTypes = orderType
}
}
});
</script>
</body>
</html>
效果图: