【Vue】模板语法，插值、指令、过滤器、计算属性及监听属性（内含面试题及毕设等实用案例）上篇

news2024/11/26 23:43:16

一、引言

1、什么是模板语法？

Vue 的模板语法是一种用于在 HTML 中声明式地渲染 Vue 组件的语法。它基于 HTML，并通过特定的模板语法扩展了 HTML。Vue 使用了一种称为 “Mustache” 语法的模板插值来绑定数据到 HTML 元素上。

在 Vue 的模板语法中，你可以使用双大括号（{{}}）将数据绑定到 HTML 元素上，这样数据的值会被动态地替换到相应的位置。

下面我会以语法的介绍和案例为大家做一个示范

二、插值

1、文本

 {{msg}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>文本</h2>
    <p>{{msg}}</p>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                msg: 'hello Vue.js'
            };
        }
    })
</script>
</html>

2、 html

使用v-html指令用于输出html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>html</h2>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                htmlstr: '<h3 style="color:red;">这是一个v-html指令html代码</h3>'
            };
        }
    })
</script>

</html>

3、属性

          HTML属性中的值应使用v-bind指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>vue中的属性</h2>
    <a v-bind:href="hrefstr">4399</a>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                hrefstr: 'https://www.4399.com/'
            };
        }
    })
</script>

</html>

他在我这里是一个链接，因为我使用了<a>标签,这样它可以做一个跳转

4、表达式

          Vue提供了完全的JavaScript表达式支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>表达式</h2>
    表达式:{{number + 1}}<br>
    截取：{{str.substring(0, 4).toUpperCase()}}<br>
    三元：{{ok ? 'yes' : 'no'}}

</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                number: 59,
                str: 'Java、python、php、C++',
                ok: false,
            };
        }
    })
</script>

</html>

       

5、class、style绑定

          使用方式：

                v-bind:class="expression"

                v-bind:style="expression"

          expression的类型：字符串、数组、对象

这里做了一个class、style一起的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<style>
    .f30 {
        font-size: 30px;
        color: red;
    }
</style>
<body>
<div id="app">
    <h2>class、style绑定</h2>
    <b :class="msg3">class、style绑定</b>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                msg3: 'f30'
            };
        }
    })
</script>

</html>

三、指令、动态参数

指的是带有“v-”前缀的特殊属性

核心指令：

         （v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-mode）

1、v-if|v-else|v-else-if

根据其后表达式的bool值进行判断是否渲染该元素

        他们只能是兄弟元素

                 v-else-if上一个兄弟元素必须是v-if

                 v-else上一个兄弟元素必须是v-if或者是v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>v-if|v-else|v-else-if</p>
    分数：<input v-model="score"/>
    <div v-if="score>=90">大神</div>
    <div v-else-if="score>=80 && score<90">优秀</div>
    <div v-else-if="score>=70 && score<80">优秀</div>
    <div v-else-if="score>=60 && score<70">良好</div>
    <div v-else="score<60">还需努力</div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                score: 78
            };
        }
    })
</script>

</html>

2、v-show

与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码:style="display:none"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>v-if|v-else|v-else-if</p>
    分数：<input v-model="score"/>
    <div v-if="score>=90">大神</div>
    <div v-else-if="score>=80 && score<90">优秀</div>
    <div v-else-if="score>=70 && score<80">优秀</div>
    <div v-else-if="score>=60 && score<70">良好</div>
    <div v-else="score<60">还需努力</div>

    <p>v-show</p>
    <div v-show="score>90">v-show-成为大神的人</div>
    <div v-if="score>90">v-if-成为大神的人</div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                score: 78
            };
        }
    })
</script>

</html>

只有当我们的分数达到了90以上就会显示出来

3、v-for

类似JS的遍历：

                          遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

                         遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>v-for</p>
    下拉框：
    <select v-model="hobbySelected">
        <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
    </select><br>
    复选框：
    <div v-for="h in hobby">
        <input :value="h.id" type='checkbox'/>{{h.name}}
    </div>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                hobby: [
                    {id: "1", name: "唱"},
                    {id: "2", name: "跳"},
                    {id: "3", name: "rap"},
                    {id: "4", name: "篮球"}
                ]
            };
        }
    })
</script>

</html>

4、动态参数

  从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数

  <a v-bind:[attrname]="url"> ... </a>

  同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

 <button v-on:[evname]="dt">点击事件</button>

  注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <h3>动态参数</h3>
    <button @click="dt">点一下</button>
    事件：<input v-model="evname"/>
    <button v-on:[evname]="dt">点击事件</button>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                evname: "click"
            };
        },
        methods: {
            dt() {
                alert("还得是你，说点就点");
            }
        }
    })
</script>
</html>

四、过滤器

1、局部过滤器

new Vue({

 filters:{'filterName':function(value){}}

});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

<!-- 在两个大括号中 -->

{{ name | capitalize }}

<!-- 在 v-bind 指令中 -->

<div v-bind:id="rawId | formatId"></div>

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联    

        {{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

        {{ message | filterA('arg1', arg2) }}

注4：js定义一个类

        function Stu(){};

        Stu.prototype.add(a,b){};//添加一个新的实例方法

        Stu.update(a,b){};//添加一个新的类方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <h3>局部过滤器基本使用</h3>
    {{msg}}<br>
    {{msg | singleA}}
    <h3>局部过滤器串行使用</h3><br>
    {{msg | singleA | singleB}}
    <h3>局部过滤器传参</h3><br>
    {{msg|param(3,5)}}
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                msg: 'python、Java、php、C++'
            };
        },
        methods: {
            handle() {
                alert("触发事件");
            }
        },
        filters: {
            'singleA': function (val) {
                return val.substring(0, 6);
            },
            'singleB': function (val) {
                return val.substring(1, 5);
            },
            'param': function (val, start, end) {
                return val.substring(start, end);
            }
        }
    })
</script>
</html>

2、全局过滤器

Vue.filter('filterName', function (value) {

 // value 表示要过滤的内容

});

2.1、配置data.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>

    <script src="date.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <h3>全局过滤器</h3>
    {{time}}<br>
    {{time | fmtDateFilter}}
</div>
</body>
<script type="text/javascript">
    // 全局过滤器
    Vue.filter('fmtDateFilter', function (value) {
        return fmtDate(value);
    });
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                time: new Date()
            };
        }
    })
</script>
</html>

五、计算属性及监听属性

1、计算属性

   计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

   computed:{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    单价：<input v-model="price">
    数量：<input v-model="num">
    总价：<input v-model="count">
</div>
</body>
<script type="text/javascript">

    new Vue({
        el: '#app',
        data() {
            return {
                price: 79,
                num: 1
            }
        },
        computed: {
            count: function () {
                return this.price * this.num
            }

        }
    })
</script>
</html>

  

2、监听属性

   监听属性 watch，我们可以通过 watch 来响应数据的变化

   watch:{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性及监听属性</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>监听属性</p>
    千米：<input v-model="km"/>
    米：<input v-model="m"/>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                km: 2,
                m: 2000
            };
        },
        watch: {
            // v指的是m变量
            m: function (v) {
                this.km = parseInt(v) / 1000;
            },
            // v指的是km变量
            km: function (v) {
                this.m = parseInt(v) * 1000;
            }
        }
    })
</script>

</html>

3、购物车案例

利用监听属性和计算属性利用来计算前端的一个案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        h1, p {
            text-align: center;
        }
    </style>
</head>
<body>
<h1>购物车</h1>
<div id="app">
    <table>
        <thead>
        <tr>
            <th>商品名</th>
            <th>商品价格</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>花西币</td>
            <td>{{hxbDj}}</td>
            <td>
                &nbsp;<input type="number" v-model="hxb"/>&nbsp;
            </td>
            <td>{{hxbTotal}}</td>
        </tr>
        <tr>
            <td>眉笔</td>
            <td>{{mbDj}}</td>
            <td>
                &nbsp;<input type="number" v-model="mb">&nbsp;
            </td>
            <td>{{mbTotal}}</td>
        </tr>
        <tr>
            <td>口红</td>
            <td>{{khDj}}</td>
            <td>
                &nbsp;<input type="number" v-model="kh">&nbsp;
            </td>
            <td>{{khTotal}}</td>
        </tr>
        <tr>
            <td colspan="3" style="text-align: right;">总计</td>
            <td>{{total}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new
    Vue({
        el: '#app',
        data() {
            return {
                hxbDj: 79,
                mbDj: 10,
                khDj: 299,
                hxb: 1,
                mb: 1,
                kh: 1,
            };
        },
        computed: {
            hxbTotal() {
                return this.hxbDj * this.hxb;
            },
            mbTotal() {
                return this.mbDj * this.mb;
            },
            khTotal() {
                return this.khDj * this.kh;
            },
            total() {
                return this.hxbTotal + this.mbTotal + this.khTotal;
            }
        }

因为我用的输入框的类型是number类型的所以我就没用按钮的点击事件++--了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1042516.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

像专业人士一样部署：掌握代码部署的最佳实践

像专业人士一样部署：掌握代码部署的最佳实践

作为开发人员&#xff0c;您知道部署代码可能是一个耗时且复杂的过程。简化生产部署对于确保您的代码尽快有效地到达用户手中至关重要。但如何实现这一目标呢&#xff1f;在本文中&#xff0c;我们将讨论简化生产部署的一些基本提示和技巧。 从自动化构建过程到优化发布策略&am…
阅读更多...
Java高级应用——多线程

Java高级应用——多线程

目录 多线程 相关名词解释 程序、进程与线程 并行与并发 单核与多核 Java多线程概述 Test测试框架测试多线程的注意事项 主线程和子线程的概念 Test测试类需要使用.join()方法来确保子线程执行完毕 线程调度&#xff08;目前仅了解&#xff09; 守护线程&#xff08;…
阅读更多...
【Linux】Linux 常用命令

【Linux】Linux 常用命令

Linux 常用命令 1. 复制/粘贴2. 查看目录和文件: ls3. 查看当前目录: pwd4. 切换目录: cd5. Linux 目录结构6. 绝对路径 vs 相对路径7. tab 键补全8. ctrl c 重新输入9. 创建文件: touch10. 查看文件内容: cat11. 写内容 echo12. 创建目录: mkdir12. 删除文件: rm13. 拷贝文件…
阅读更多...
易基因直播预告｜细菌微生物基因表达调控表观研究易基因科技

易基因直播预告｜细菌微生物基因表达调控表观研究易基因科技

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 DNA甲基化是在半个多世纪前在细菌中发现的。DNA碱基可以作为一个表观遗传调节因子——也就是说&#xff0c;它可以赋予相同的基因序列不同的和可逆的调控状态。在真核生物中&#xff0c;…
阅读更多...
可变形注意力转换器综述

可变形注意力转换器综述

这篇文章基于本文的发现 一、说明 关于注意力机制&#xff0c;关于transformer等存在大量的研究和尝试&#xff0c;这些研究有的被沙汰&#xff0c;有的被采用并发扬光大&#xff0c;本篇对可变卷积、可变局部注意力机制和全局注意力机制做详细解释。因为这些模型规模巨大&…
阅读更多...
【前端面试题】2023年 国庆 前端面试真题之JS篇

【前端面试题】2023年 国庆 前端面试真题之JS篇

人的一生&#xff0c;总是难免有浮沉。不会永远如旭日东升&#xff0c;也不会永远痛苦潦倒。反复地一浮一沉&#xff0c;对于一个人来说&#xff0c;正是磨练。因此&#xff0c;浮在上面的&#xff0c;不必骄傲&#xff1b;沉在底下的&#xff0c;更用不着悲观。必须以率直、谦…
阅读更多...
获取keystore中的公钥模数及md5

获取keystore中的公钥模数及md5

app备案时需要使用apk中的签名公钥&#xff0c;以及md5&#xff0c;但官方提供的方法是使用jadxGUI去打开apk获取&#xff1a; 填写App特征信息_备案-阿里云帮助中心 实际生产中apk都没有可能就要走备案流程。 但其实公钥模数和md5不需要apk&#xff0c;只需要keystore就行了。…
阅读更多...
企业怎么在千万媒体渠道中找到适合自己的，媒介盒子告诉你

企业怎么在千万媒体渠道中找到适合自己的，媒介盒子告诉你

哈喽,大家好,今天媒介盒子小编又来跟大家分享软文推广的干货知识了,本篇分享的主要内容是:企业怎么在千千万万的媒体渠道中找到适合自己的。 1. 深入了解用户和产品 企业在进行产品推广之前&#xff0c;一定要全方位地挖掘产品可能应用到的使用场景。锁定产品的目标的目标用户…
阅读更多...
OpenCV实现FAST算法角点检测 、ORB算法特征点检测

OpenCV实现FAST算法角点检测 、ORB算法特征点检测

目录 1 Fast算法 1.1 Fast算法原理 1.2 实现办法 1.2.1 机器学习的角点检测器 1.2.2 非极大值抑制 1.3 代码实现 1.4 结果展示 2 &#xff0c;ORB算法 2.1代码实现 2.2 结果展示 1 Fast算法 1.1 Fast算法原理 1.2 实现办法 1.2.1 机器学习的角点检测器 1.2.2 …
阅读更多...
React 全栈体系（十五）

React 全栈体系（十五）

第八章 React 扩展 一、setState 1. 代码 /* index.jsx */ import React, { Component } from reactexport default class Demo extends Component {state {count:0}add ()>{//对象式的setState/* //1.获取原来的count值const {count} this.state//2.更新状态this.set…
阅读更多...
在Linux中通过docker安装宝塔面板

在Linux中通过docker安装宝塔面板

先在Linux中手动安装docker&#xff0c;然后在docker中安装宝塔面板&#xff0c;并进行docker网络端口映射。 手动安装docker 第一步&#xff0c;卸载旧版本docker。 若系统中已安装旧版本docker&#xff0c;则需要卸载旧版本docker以及与旧版本docker相关的依赖项。 命令&…
阅读更多...
深入理解 Spring MVC 的工作原理

深入理解 Spring MVC 的工作原理

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
185_技巧_Power Query(M)语言快捷输入之搜狗输入法设置自定义短语

185_技巧_Power Query(M)语言快捷输入之搜狗输入法设置自定义短语

185_技巧_Power Query(M)语言快捷输入之搜狗输入法设置自定义短语 此前&#xff0c;我们发布过如何通过 QQ拼音输入法 来实现快速的输入Power Query(M) 语言。参考&#xff1a;https://jiaopengzi.com/730.html 今天我们来更新 Power Query(M) 语言在 搜狗输入法 中设置自定义…
阅读更多...
iPhone 15首批体验出炉，掉漆、烫手、进灰，口碑严重崩塌

iPhone 15首批体验出炉，掉漆、烫手、进灰，口碑严重崩塌

眼看 iPhone 15 系列已经上架&#xff0c;不知道大伙儿剁手了没有&#xff1f; 哦&#xff0c;原来你们也在等首批用户体验反馈啊&#xff01; 随着 22 号正式开售&#xff0c;到目前不少人陆续上手 iPhone 15 系。 咱们也是翻阅了大量贴吧用户反馈、电商平台评论等&#xff…
阅读更多...
2023-09-26 LeetCode每日一题（递枕头）

2023-09-26 LeetCode每日一题（递枕头）

2023-09-26每日一题 一、题目编号 2582. 递枕头二、题目链接 点击跳转到题目位置 三、题目描述 n 个人站成一排&#xff0c;按从 1 到 n 编号。 最初&#xff0c;排在队首的第一个人拿着一个枕头。每秒钟&#xff0c;拿着枕头的人会将枕头传递给队伍中的下一个人。一旦枕…
阅读更多...
Python读取Excel每一行为列表—大PK(openpyxl\pandas\xlwings\xlrd)看谁用时少？

Python读取Excel每一行为列表—大PK(openpyxl\pandas\xlwings\xlrd)看谁用时少？

目录 背景使用—openpyxl&#xff08;耗时89秒输出&#xff09;使用—pandas&#xff08;耗时44秒输出&#xff09;使用—xlwings&#xff08;耗时15秒输出&#xff09;使用—xlrd&#xff08;耗时47秒输出&#xff09;总结 背景 我们在平常办公的时候&#xff0c;尤其是财务人…
阅读更多...
流媒体播放器EasyPlayer.js无法播放H.265的情况是什么原因？该如何解决？

流媒体播放器EasyPlayer.js无法播放H.265的情况是什么原因？该如何解决？

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;可支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff0c;能支持WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#…
阅读更多...
C语言 —— 分支语句和循环语句

C语言 —— 分支语句和循环语句

目录 1. 什么是语句? 2. 分支语句 (选择结构) 2.1 if语句 2.1.1 悬空else 2.1.2 if书写形式的对比 2.1.3 练习 2.2 switch语句 2.2.1 switch的使用 2.2.2 default字句 2.2.3 练习 3. 循环语句 3.1 while循环 3.1.1 while语句中的break和continue break介绍 continue介绍 3.2 f…
阅读更多...
Linux配置命令

Linux配置命令

一&#xff1a;HCSA-VM-Linux安装虚拟机后的基础命令 1.代码命令 1.查看本机IP地址&#xff1a; ip addr 或者 ip a [foxbogon ~]$ ip addre [foxbogon ~]$ ip a 1&#xff1a;<Loopback,U,LOWER-UP> 为环回2网卡 2: ens160: <BROADCAST,MULTICAST,UP,LOWER_UP&g…
阅读更多...
经典文献阅读之--EGO-Planner(无ESDF的四旋翼局部规划器)

经典文献阅读之--EGO-Planner(无ESDF的四旋翼局部规划器)

0. 简介 作为局部规划器而言&#xff0c;当机器人或无人机想要避开动态障碍物时。局部规划器就显得尤为重要了。其中基于梯度的规划器被广泛用于四旋翼无人机的局部规划&#xff0c;其中欧几里得符号距离场&#xff08;ESDF&#xff09;对于评估梯度幅度和方向至关重要。然而&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023