图书管理小案例和姓名筛选（计算属性）

最新推荐文章于 2024-05-30 09:55:33 发布

予倾

最新推荐文章于 2024-05-30 09:55:33 发布

阅读量149

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/QZ9420/article/details/110632906

版权

vue 专栏收录该内容

56 篇文章 4 订阅

订阅专栏

案例一

<!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>

效果图：
在这里插入图片描述

予倾

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图书管理小案例和姓名筛选（计算属性）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ margin: auto; width: 530px; text-align: center; }
复制链接

扫一扫

专栏目录