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

前端开发学习 (三) 列表功能

news 2025/8/22 0:08:43

一、列表功能

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><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><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></head><body>
<div id="app1"><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><script>var vm = new Vue({el: '#app1',data: {list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}]}});
</script>
</body></html>

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

2、无数据时，增加提示

如果list中没有数据，那么表格中就会只显示表头<th>，这样显然不太好看

为此，我们需要增加一个v-if判断：当数据为空时，显示提示

<!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://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><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></head><body>
<div id="app1"><table class="table"><thead><tr><th>编号</th><th>名称</th><th>创建时间</th><th>操作</th></tr></thead>
<!--         在展示前通过v-if判断数据长度是否大于0--><tbody v-if="list.length > 0"><tr v-for="item in list"><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.ctime }}</td><td><a href="#">删除</a></td></tr></tbody>
<!--        当不大于0时展示无数据--><tbody v-else><tr><td colspan="4">列表无数据</td></tr></tbody></table>
</div><script>var vm = new Vue({el: '#app1',data: {list: [] //清除数据}});
</script>
</body></html>

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><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><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></head><body>
<div id="app1"><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><script>var vm = new Vue({el: '#app1',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>
</body></html>

4、item的删除表格数据

<!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://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><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></head><body>
<div id="app1"><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><script>var vm = new Vue({el: '#app1',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) {//提醒用户是否要删除数据if (!confirm('是否要删除数据?')) {//当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行return;}//调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值var index = this.list.findIndex(function (item) {return item.id == id});//调用方法：list.splice(待删除的索引, 删除的元素个数)this.list.splice(index, 1);}}});
</script>
</body></html>

5：按条件筛选item

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

也就是说之前 v-for 中的数据，都是直接从 data 上的list中直接渲染过来的

现在我们在使用v-for进行遍历显示的时候，不能再遍历全部的 list 了；我们要自定义一个 search 方法，同时，把keywords作为参数，传递给 search 方法。即v-for="item in search(keywords)"

在 search(keywords) 方法中，为了获取 list 数组中匹配的item，我们可以使用filter + includes()方法

案例

    search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的itemvar newList = this.list.filter(item => {// 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')//  如果包含，则返回 true ，否则返回 falseif (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><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><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></head><body>
<div id="app1"><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><script>var vm = new Vue({el: '#app1',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) { // 根据关键字，进行数据的搜索，返回匹配的itemvar newList = this.list.filter(item => {// 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')//  如果包含，则返回 true ，否则返回 falseif (item.name.includes(keywords)) {return item}})return newList}}});
</script>
</body></html>

二、自定义过滤器

Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化

过滤器可以用在两种表达式中，mustache 插值表达式和 v-bind表达式

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示

#官方文档
http://v1-cn.vuejs.org/guide/custom-filter.html

我们可以用全局方法Vue.filter()自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。他需要接受两个参数(过滤器名称、过滤器函数)

比如说，我要将（曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人）这句 msg 中的“单纯”改为“邪恶”

1、定义插值表达式的方法

<p>{{ msg | msgFormat }</p>#说明
#1、管道符前面的msg是要把msg这段文本进行过滤
#2、管道符后面的msgFormat，是通过msgFormat这个过滤器进行来操作

2、定义过滤器函数

        // Vue.filter 中的第一个参数是过滤器的名称，第二个参数是具体的过滤器函数// 定义一个 Vue 全局的过滤器，名字叫做  msgFormatVue.filter('msgFormat', function (myMsg) {  // function 的第一个参数指的是管道符前面的 msg// 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则return myMsg.replace(/单纯/g, '邪恶')})//说明
//1、 上面代码中Vue.filter(‘过滤器的名称’, 具体的过滤器函数)`中的//第一个参数指的就是过滤器的名称，他必须和管道符后面的名称完全一致//第二个参数是具体的过滤器函数//2、过滤器函数function中，第一个参数指的管道符前面的msg//3、replace()方法是用来做字符串的替换的。第一个参数如果只写成单纯
//那么就会只修改 msg 中的第一个`单纯`字样。所以这里就用正则去匹配msg 中所有的`单纯`字样

3、案例

<!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://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><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></head><body>
<div id="app1"><!-- 通过 过滤器 msgFormat 对 msg 进行过滤--><p>{{ msg | msgFormat }}</p>
</div><script>// 定义一个 Vue 全局的过滤器，名字叫做  msgFormatVue.filter('msgFormat', function (myMsg) {// 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则//将 myMsg 中的所有`单纯`字样，修改为`邪恶`return myMsg.replace(/单纯/g, '邪恶')})var vm = new Vue({el: '#app1',data: {msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'},methods: {}});
</script>
</body></html>

后续我们可以通过这个方法，将请求api返回的json数据，取出他们的名称，比如name然后转换成其他的中文名称展示

三、给过滤器添加多个参数

上面的举例代码中，`{{ msg | msgFormat }}`中，过滤器的调用并没有加参数，其实它还可以添加多个参数，接下来我们基于上面的代码进行改进

1、过滤器加一个参数

#原代码
<p>{{ msg | msgFormat }}</p>#修改后#在插值表达式中添加一个参数
<p>{{ msg | msgFormat('xxx') }}</p>

在插值表达式中添加携带参数后，也需要在过滤器函数中，添加(myMsg, arg2) 中的arg2就是接受传参，如下

    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormatVue.filter('msgFormat', function (myMsg, arg2) {// 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为上面的xxx//将 myMsg 中的所有`单纯`字样，修改为 arg2return myMsg.replace(/单纯/g, arg2)})

全量代码

<!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://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><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></head><body>
<div id="app1"><!-- 通过 过滤器 msgFormat 对 msg 进行过滤--><p>{{ msg | msgFormat('xxx') }}</p>
</div><script>// 定义一个 Vue 全局的过滤器，名字叫做  msgFormatVue.filter('msgFormat', function (myMsg, arg2) {// 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为上面的xxx//将 myMsg 中的所有`单纯`字样，修改为 arg2return myMsg.replace(/单纯/g, arg2)})var vm = new Vue({el: '#app1',data: {msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'},methods: {}});
</script>
</body></html>

2、过滤器加两个参数

<!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://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><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></head><body>
<div id="app1"><!-- 通过 过滤器 msgFormat 对 msg 进行过滤--><!-- 【重要】括号里的第一个参数代表 function 中的 arg2，括号里的第二个参数代表 function 中的 arg3--><p>{{ msg | msgFormat('【牛x】', '【参数arg3】') }}</p></div><script>// 定义一个 Vue 全局的过滤器，名字叫做  msgFormatVue.filter('msgFormat', function (myMsg, arg2, arg3) {// 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为 xxx//将 myMsg 中的所有`单纯`字样，修改为`arg2 + arg3`return myMsg.replace(/单纯/g, arg2 + arg3)})var vm = new Vue({el: '#app1',data: {msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'},methods: {}});
</script>
</body></html>

3、同时使用多个过滤器

<!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://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><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></head><body>
<div id="app1"><!-- 通过 两个过滤器（msgFormat、myFilter2）对 msg 进行过滤--><!-- 将 msg 交给第一个过滤器来处理，然后将处理的结果交给第二个过滤器来处理--><p>{{ msg | msgFormat('【牛x】', '【参数arg3】') | myFilter2}}</p></div><script>// 定义一个 Vue 全局的过滤器，名字叫做  msgFormatVue.filter('msgFormat', function (myMsg, arg2, arg3) {// 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为 xxx//将 myMsg 中的所有`单纯`字样，修改为`arg2 + arg3`return myMsg.replace(/单纯/g, arg2 + arg3)})//定义第二个全局过滤器Vue.filter('myFilter2', function (myMsg) {//在字符串 msg 的最后面加上【后缀】return myMsg + '【后缀】'})var vm = new Vue({el: '#app1',data: {msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'},methods: {}});
</script>
</body></html>

添加了多个过滤器，是将 msg 交给第一个过滤器来处理，然后将处理的结果交给第二个过滤器来处理 。

4、时间格式化案例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><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><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></head><body>
<div id="app1">{{ time }}<br /> {{ time | datefmt }}
</div><div id="app2">{{ time | datefmt }}
</div><script>// 定义一个名称为 datafmt的全局过滤器Vue.filter('datefmt', function (input) {// 过滤器的逻辑：将input的值格式化成 yyyy-MM-dd 字符串输出var res = '';var year = input.getFullYear();var month = input.getMonth() + 1;var day = input.getDate();res = year + '-' + month + '-' + day;return res;});new Vue({el: '#app1',data: {time: new Date()}})new Vue({el: '#app2',data: {time: new Date()}});
</script>
</body></html>

5、时间格式化案例2

<!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://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1">2018-05-25T14:06:51.618Z<br /> {{ '2018-05-25T14:06:51.618Z' | dateFormat }}
</div><script>Vue.filter('dateFormat', function (dateStr, pattern = "") {// 根据给定的时间字符串，得到特定的时间var dt = new Date(dateStr)//   yyyy-mm-ddvar y = dt.getFullYear()var m = dt.getMonth() + 1var d = dt.getDate()// return y + '-' + m + '-' + dif (pattern.toLowerCase() === 'yyyy-mm-dd') { //如果调用过滤器的参数写的是 yyyy-mm-dd，那就按照这种  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}`}})new Vue({el: '#app1',data: {time: new Date()}});
</script>
</body></html>

6、时间格式化案例3

<!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://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1">2018-05-25T14:06:51.618Z<br /> {{ '2018-05-25T14:06:51.618Z' | dateFormat }}
</div><script>Vue.filter('dateFormat', function (dateStr, pattern) {// 根据给定的时间字符串，得到特定的时间var dt = new Date(dateStr)//   yyyy-mm-ddvar y = dt.getFullYear()var m = (dt.getMonth() + 1).toString().padStart(2, '0')var d = dt.getDate().toString().padStart(2, '0')if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') { //如果调用过滤器的参数写的是 yyyy-mm-dd，那就按照这种  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} ~~~~~~~`}})new Vue({el: '#app1',data: {time: new Date()}});
</script>
</body></html>

四、自定义私有过滤器

私有过滤器：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。

案例日期格式化

<!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://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1">{{ time }}<br />{{ time | datefmt }}
</div><script>new Vue({el: '#app1',data: {time: new Date()},//在某一个vue对象内部定义的过滤器称之为私有过滤器，//这种过滤器只有在当前vue对象el指定的监管的区域有用filters: {// input是自定义过滤器的默认参数，input的值永远都是取自于 | 左边的内容datefmt: function (input) {// 定义过滤器的内容：将input的值格式化成 yyyy-MM-dd 字符串输出var res = '';var year = input.getFullYear();var month = input.getMonth() + 1;var day = input.getDate();res = year + '-' + month + '-' + day;return res;}}});
</script>
</body></html>

前端开发学习 (三) 列表功能

一、列表功能 1、列表功能 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compa…...

编程日记 2023/11/28 8:36:02

win11渗透武器库，囊括所有渗透工具

开箱即用，最全的武器库，且都是2023年11月最新版，后续自己还可以再添加，下载地址：https://download.csdn.net/download/weixin_59679023/88565739 服务连接信息收集工具端口扫描代理抓包漏洞扫描指纹识别 webshel…...

编程日记 2023/11/28 8:35:01

13-21-普通数组、矩阵

LeetCode 热题 100 文章目录 LeetCode 热题 100普通数组13. 中等-最大子数组和14. 中等-合并区间15. 中等-轮转数组16. 中等-除自身以外数组的乘积17. 困难-缺失的第一个正数矩阵18. 中等-矩阵置零19. 中等-螺旋矩阵20. 中等-旋转图像21. 中等-搜索二维矩阵II 本文存储我刷题的…...

编程日记 2023/11/28 8:34:00

代码随想录算法训练营第四十六天【动态规划part08】 | 139.单词拆分、背包总结

139.单词拆分题目链接： 力扣（LeetCode）官网 - 全球极客挚爱的技术成长平台求解思路： 单词是物品，字符串s是背包，单词能否组成字符串s，就是问物品能不能把背包装满。动规五部曲确定dp数…...

编程日记 2023/11/28 8:32:59

go语言基础 break和contine区别

背景 break和continue是编程语言的标准语法，几乎在所有的语言都有类似的用法。 go语言及所有其他编程语言for循环或者其他循环区别 for i : 0; i < 10; i {if i 5 {continue}fmt.Println(i)for j : 0; j < 3; j {fmt.Println(strconv.Itoa(j) "a&q…...

编程日记 2023/11/28 8:31:58

vue3父子组件通过$parent与ref通信

父组件 <template><div><h1>ref与$parents父子组件通信 {{ parentMoney }}</h1><button click"handler">点击我子组件的值会减20</button><hr><child ref"children"></child></div> </te…...

编程日记 2023/11/28 8:30:57

PHP中的常见的超全局变量

PHP是一种广泛使用的服务器端脚本语言，它被用于开发各种Web应用程序。在PHP中，有一些特殊的全局变量，被称为超全局变量。超全局变量在整个脚本中都是可用的，无需使用global关键字来访问它们。在本文中，我们将深入了解P…...

编程日记 2023/11/28 8:27:54

leetcode9.回文数

回文数 0.题目1.WJQ的思路2.实现过程2.0 原始值怎么一个个取出来？2.1 取出来的数如何存到新的数字后面？2.2完整的反转得到新数的过程 3.完整的代码4.可运行的代码5.算法还可以优化的部分 0.题目给你一个整数 x ，如果 x 是一个回文整数&…...

编程日记 2023/11/28 8:26:54

springboot(ssm大学生二手电子产品交易平台跳蚤市场系统Java(codeLW)

springboot(ssm大学生二手电子产品交易平台跳蚤市场系统Java(code&LW) 开发语言：Java 框架：ssm/springboot vue JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.7（或…...

编程日记 2023/11/28 8:24:51

关于微信小程序中如何实现数据可视化-echarts动态渲染

移动端设备中，难免会涉及到数据的可视化展示、数据统计等等，本篇主要讲解原生微信小程序中嵌入echarts并进行动态渲染，实现数据可视化功能。基础使用首先在GitHub上下载echarts包地址：https://github.com/ecomfe/echarts-for…...

编程日记 2023/11/28 8:22:49

在Windows WSL (Linux的Windows子系统)上运行的Ubuntu如何更改主机名

在Windows 安装的Ubuntu，如何修改主机名。有列了两种方法，提供给大家参照。文章目录方法一：hostname指令修改方法二：修改配置文件修改hostnanmewsl.conf 文件配置选项推荐阅读方法一：hostname指令修改 hostname指…...

编程日记 2023/11/28 8:21:48

如何使用内网穿透将Tomcat网页发布到公共互联网上【内网穿透】

文章目录前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语前言 Tomcat作为一个轻量级的服务器，不仅名字很有趣&#xff0…...

编程日记 2023/11/28 8:20:47

网络入门---网络的大致了解

目录标题网络发展的简单认识协议作用的理解协议的本质什么是协议分层网络通信所面对的问题OSI七层模型TCP/IP模型协议报头的理解局域网通信局域网通信基本原理报头的问题局域网的特点跨网的网络链接如何查看mac地址网络发展的简单认识通过之前的学习我们知道计算机是给人提…...

编程日记 2023/11/28 8:19:45

构建沉浸式 AI 文本编辑器：开源 3B 编辑器的设计原则与思路

借助于在 AutoDev 与 IDE 上的 AI 沉浸式体验设计，我们开始构建一个 AI 原生的文本编辑器，以探索沉浸式创作体验。其适用于需求编写、架构文档等等文档场景，以加速软件开发中的多种角色的日常工作。 GitHub：https://github.com/un…...

编程日记 2023/11/28 8:17:42

【从删库到跑路 | MySQL总结篇】表的增删查改（进阶上）

个人主页：兜里有颗棉花糖欢迎点赞👍 收藏✨ 留言✉ 加关注💓本文由兜里有颗棉花糖原创收录于专栏【MySQL学习专栏】🎈 本专栏旨在分享学习MySQL的一点学习心得，欢迎大家在评论区讨论💌 目录一、数据…...

编程日记 2023/11/28 8:15:40

[每周一更]-(第74期)：Docker-compose 部署Jenkins容器-英文版及错误纠错

1、前文概要通过物理机部署Jenkins前文已经讲过（地址：[Jenkins] 物理机安装 Jenkins），也已经公司内部平稳运行若干年，考虑到容器化的使用场景，部分项目都采用容器运行，开始考虑部署容器化的J…...

编程日记 2023/11/28 8:13:38

MySQL日期函数sysdate()与now()的区别，获取当前时间，日期相关函数

select sleep(2) as datetime union all select sysdate() -- sysdate() 返回的时间是当前的系统时间，而 now() 返回的是当前的会话时间。 union all select now() -- 等价于 localtime,localtime(),localtimestamp,localtimestamp(),current_timestamp,curre…...

编程日记 2023/11/28 8:12:36

邦芒解析：面试怎么谈自身优缺点

在面试时，当被问到你的优缺点时，你可以这样回答： 优点： 我的工作能力强，能够高效地完成任务。我对技术有热情，喜欢学习新的技能和知识。我善于沟通，能够与不同背景的人进行有效沟通。我注重细节…...

编程日记 2023/11/28 8:11:35

【libGDX】加载G3DJ模型

1 前言 libGDX 提供了自己的 3D 格式模型文件，称为 G3D，包含 g3dj（Json 格式）和 g3db（Binary 格式）文件，官方介绍见 → importing-blender-models-in-libgdx。对于 fbx 文件，libGDX…...

编程日记 2023/11/28 8:10:34

0基础学习VR全景平台篇第123篇：VR视频航拍补天 - PR软件教程

上课！全体起立~ 大家好，欢迎观看蛙色官方系列全景摄影课程！ 嗨，大家好，今天我们来介绍【航拍VR视频补天】。之前已经教给了大家如何处理航拍图片的补天，肯定有很多小伙伴也在好奇，航拍的VR视频…...

编程日记 2023/11/28 8:09:32

剑指offer20_链表中环的入口节点

链表中环的入口节点给定一个链表，若其中包含环，则输出环的入口节点。若其中不包含环，则输出null。数据范围节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。节点 val 值各不相同。链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/8/13 4:24:12

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言生活的美好，总是藏在那些你咬牙坚持的日子里。硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。驱动 OLED 屏幕的 IIC 总线数据传输格式示意图 …...

编程新知 2025/8/21 3:06:47

数据链路层的主要功能是什么

数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装封装： 将网络层下发…...

编程新知 2025/6/16 23:36:50

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/8/20 22:12:12

优选算法第十二讲：队列 + 宽搜优先级队列

优选算法第十二讲：队列宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/8/13 13:05:41

深度学习水论文：mamba＋图像增强

🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...

编程新知 2025/8/19 6:45:16

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/7/7 16:04:22