当前位置： 首页 > article >正文

Vue前端学习笔记03

article 2024/12/24 11:44:56

05 Vue的举例：列表功能

# 步骤 1：列表功能

<!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>
    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse; /*这一行，不能少：表格的两边框合并为一条*/
        }

        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;

        }

        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }
    </style>

    <script src="vue2.5.16.js"></script>
</head>

<body>

<div id="app">

    <table class="table">
        <th>编号</th>
        <th>名称</th>
        <th>创建时间</th>
        <th>操作</th>
        <tr v-for="item in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td><a href="#">删除</a></td>
        </tr>
    </table>
</div>

</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}]
        }
    })

</script>

</html>
//数据是存放在data的list中的，将data中的数据通过`v-for`遍历给表格

# 步骤 2：无数据时，增加提示

<tr v-show="list.length == 0">
    <td colspan="4">列表无数据</td>
</tr>
//增加一个`v-if`判断：当数据为空时，显示提示
//`colspan="4"`指的是让当前这个`<td>`横跨4个单元格的位置

# 步骤 3：item的添加 

具体实现步骤如下：

（1）用户填写的数据单独存放在data属性里，并采用`v-model`进行双向绑定。

（2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）。

（3）将数据展示出来。`v-for`有个特点：当list数组发生改变后，vue.js就会自动调用`v-for`重新将数据生成，这样的话，就实现了数据的自动刷新。

<!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>
    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse; /*这一行，不能少：表格的两边框合并为一条*/
        }

        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;
        }

        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }

        .form {
            width: 800px;
            margin: 20px auto;
        }

        .form button {
            margin-left: 10px;
        }
    </style>

    <script src="vue2.5.16.js"></script>
</head>

<body>

<div id="app">

    <div class="form">

        编号：<input type="text" v-model="formData.id">
        名称：<input type="text" v-model="formData.name">

        <button v-on:click="addData">添加</button>
    </div>

    <table class="table">
        <th>编号</th>
        <th>名称</th>
        <th>创建时间</th>
        <th>操作</th>
        <tr v-show="list.length == 0">
            <td colspan="4">列表无数据</td>
        </tr>
        <tr v-for="item in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td><a href="#">删除</a></td>
        </tr>
    </table>
</div>

</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}],
            //用户添加的数据
            formData: {
                id: 0,
                name: ""
            }
        },

        methods: {
            addData: function () {
                //将数据追加到list中
                var p = {id: this.formData.id, name: this.formData.name, ctime: new Date()};
                this.list.push(p);

                //清空页面上的文本框中的数据
                this.formData.id = 0;
                this.formData.name = '';
            }
        }
    });

</script>

</html>

 # 步骤 4：item的删除

 <!--绑定delete事件，根据括号里的参数进行删除-->
 <td><a href="#" v-on:click="delData(item.id)">删除</a></td>
```javascript
            delData: function (id) {
                // 0 提醒用户是否要删除数据
                if (!confirm('是否要删除数据?')) {
                    //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
                    return;
                }

                // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值（在数组中的索引值）
                var index = this.list.findIndex(function (item) {
                    return item.id == id
                });

                // 2.0 调用方法：list.splice(待删除的索引, 删除的元素个数)
                this.list.splice(index, 1);
            }
// 根据id得到下标
// 默认去遍历list集合，将集合中的每个元素传入到function的item里，var index = this.list.findIndex(function(item){
//根据item中的id属性去匹配传进来的id
//如果是则返回true ；否返回false,继续下面的一条数据的遍历，以此类推
//return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的index
});

当item被删除后，v-for会被自动调用，进而自动更新view；
完整版代码： 

<!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>
    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;  /*这一行，不能少：表格的两边框合并为一条*/
        }

        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;
        }

        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }

        .form {
            width: 800px;
            margin: 20px auto;
        }

        .form button {
            margin-left: 10px;
        }
    </style>

    <script src="vue2.5.16.js"></script>
</head>

<body>

    <div id="app">

        <div class="form">

            编号：
            <input type="text" v-model="formData.id"> 名称：
            <input type="text" v-model="formData.name">

            <button v-on:click="addData">添加</button>
        </div>

        <table class="table">
            <th>编号</th>
            <th>名称</th>
            <th>创建时间</th>
            <th>操作</th>
            <tr v-show="list.length == 0">
                <td colspan="4">列表无数据</td>
            </tr>
            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <!--绑定delete事件，根据括号里的参数进行删除-->
                <td>
                    <a href="#" v-on:click="delData(item.id)">删除</a>
                </td>
            </tr>
        </table>
    </div>

</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
            //用户添加的数据
            formData: {
                id: 0,
                name: ""
            }
        },

        methods: {
            addData: function () {
                //将数据追加到list中
                var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
                this.list.push(p);

                //清空页面上的文本框中的数据
                this.formData.id = 0;
                this.formData.name = '';
            },  //注意：方法之间用逗号隔开，这个逗号不要忘记了

            delData: function (id) {
                // 0 提醒用户是否要删除数据
                if (!confirm('是否要删除数据?')) {
                    //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
                    return;
                }

                // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
                var index = this.list.findIndex(function (item) {
                    return item.id == id
                });

                // 2 调用方法：list.splice(待删除的索引, 删除的元素个数)
                this.list.splice(index, 1);
            }


        }
    });

</script>

</html>

 # 步骤 5：按条件筛选item

现在要求实现的效果是，在搜索框输入关键字 keywords，列表中仅显示匹配出来的内容。

- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的。
- 现在， 我们在使用`v-for`进行遍历显示的时候，不能再遍历全部的 list 了；我们要自定义一个 search 方法，同时，把keywords作为参数，传递给 search 方法。即`v-for="item in search(keywords)"`。
在 search(keywords) 方法中，为了获取 list 数组中匹配的item，我们可以有两种方式实现。如下。
 

**方式一**：采用`forEach + indexOf()`

```javascript
    search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item

        //实现方式一：通过 indexOf() 进行匹配。
        var newList = [];
        this.list.forEach(item => {
            if (item.name.indexOf(keywords) != -1) {  //只要不等于 -1，就代表匹配到了
                newList.push(item)
            }
        })
        return newList
    }
**方式二**： filter + includes()方法

```javascript
    search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item

        var newList = this.list.filter(item => {
            // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')
            //  如果包含，则返回 true ，否则返回 false
            if (item.name.includes(keywords)) {
                return item
            }
        })

        return newList
    }

 完整代码：

<!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>
    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;/*这一行，不能少：表格的两边框合并为一条*/
        }

        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;
        }

        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }

        .form {
            width: 800px;
            margin: 20px auto;
        }

        .form button {
            margin-left: 10px;
        }
    </style>

    <script src="vue2.5.16.js"></script>
</head>

<body>

    <div id="app">

        <div class="form">

            编号：
            <input type="text" v-model="formData.id"> 名称：
            <input type="text" v-model="formData.name">

            <button v-on:click="addData">添加</button>
            搜索：
            <input type="text" v-model="keywords">

        </div>

        <table class="table">
            <th>编号</th>
            <th>名称</th>
            <th>创建时间</th>
            <th>操作</th>
            <tr v-show="list.length == 0">
                <td colspan="4">列表无数据</td>
            </tr>
            <tr v-for="item in search(keywords)">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <!--绑定delete事件，根据括号里的参数进行删除-->
                <td>
                    <a href="#" v-on:click="delData(item.id)">删除</a>
                </td>
            </tr>
        </table>
    </div>

</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
            //用户添加的数据
            formData: {
                id: '',
                name: ""
            },
            keywords: ""
        },

        methods: {
            addData: function () {
                //将数据追加到list中
                var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
                this.list.push(p);

                //清空页面上的文本框中的数据
                this.formData.id = '';
                this.formData.name = '';
            },  //注意：方法之间用逗号隔开，这个逗号不要忘记了

            delData: function (id) {
                // 0 提醒用户是否要删除数据
                if (!confirm('是否要删除数据?')) {
                    //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
                    return;
                }

                // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
                var index = this.list.findIndex(function (item) {
                    return item.id == id
                });

                // 2 调用方法：list.splice(待删除的索引, 删除的元素个数)
                this.list.splice(index, 1);
            },

            search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item

                var newList = this.list.filter(item => {
                    // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')
                    //  如果包含，则返回 true ，否则返回 false
                    if (item.name.includes(keywords)) {
                        return item
                    }
                })

                return newList
            }
        }
    });

</script>

</html>

 06 自定义过滤器：时间格式化举例

过滤器：Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache **插值表达式**、 **v-bind表达式**。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。

（1）在插值表达式中这样调用：

```html
        <p>{{ msg | msgFormat }</p>
```

 （2）定义过滤器`msgFormat`：

```javascript
        // Vue.filter 中的第一个参数是过滤器的名称，第二个参数是具体的过滤器函数
        // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
        Vue.filter('msgFormat', function (myMsg) {  // function 的第一个参数指的是管道符前面的 msg
            // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
            return myMsg.replace(/单纯/g, '邪恶')
        })
```

 


http://www.kler.cn/a/380884.html

相关文章：

  • Chromium 中chrome.webRequest扩展接口定义c++
  • 深度学习每周学习总结J9（Inception V3 算法实战与解析 - 天气识别）
  • CNN回归-卷积神经网络（Convolutional Neural Network）
  • Vue进阶之Vue RouterSSR
  • 【学习记录】浏览器指纹相关学习记录（指纹介绍、获取指纹、修改指纹、随机指纹保护隐私等）
  • redis数据转移
  • [代码随想录打卡Day7] 454.四数相加II 383. 赎金信 15. 三数之和 18. 四数之和
  • Modbus通信协议
  • 【C++】RBTree——红黑树
  • MongoDB基础教程
  • leaflet矢量瓦片vetorgrid显示聚合和图标裁剪显示不全的问题
  • Swift 开发教程系列 - 第2章：Swift 基础语法
  • 地理信息科学专业想搞GIS开发：学前端还是后端？
  • 多核架构的基本概念
  • 分布式追踪与告警系统：保障分布式系统稳定运行的利器
  • Jest进阶知识：测试快照 - 确保组件渲染输出正确
  • 学习记录：js算法（八十六）：全排列 II
  • 棋牌游戏防ddos攻击，高防IP好用吗？
  • IO流篇（一、File）
  • 承建网站提高访问者留存率
  • 对于IIC的理解
  • Python小白学习教程从入门到入坑------第二十六课 单例模式（语法进阶）
  • 探索Java与C++中的类成员访问修饰符：从默认设置到封装实践
  • 【系统架构设计师】预测试卷一：论文（包括4篇论文主题对应的写作要点分析）
  • AUTOSAR COM 与 LargeDataCOM 模块解析及 C++ 实现示例
  • Docker：容器编排 Docker Compose