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

建立的含义/优化游戏卡顿的软件

news 文章来源：https://blog.csdn.net/weixin_46592197/article/details/132753199 2025/3/6 11:34:13
建立的含义,优化游戏卡顿的软件,用ip的网站要备案吗,小程序做网站文章目录 Vue3样式绑定1. class 属性绑定1.1 v-bind:class 设置一个对象，从而动态的切换 class1.2 在对象中传入更多属性用来动态切换多个 class1.3 直接绑定数据里的一个对象1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式1. 5 数据语法1.6 errorClass…

文章目录

  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素

Vue3样式绑定

1. class 属性绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。

v-bind:class 可以简写为 :class。

1.1 v-bind:class 设置一个对象，从而动态的切换 class

  • 实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:class 设置一个对象，从而动态的切换 class </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<!--    定义样式--><style>.active {width: 100px;height: 100px;background: green;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        v-bind:class可以缩写为 :class --><div :class="{'active': isActive}"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// isActive为false则不显示isActive: true}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上实例 div class 渲染结果为：

    <div class="active"></div>

    在这里插入图片描述

1.2 在对象中传入更多属性用来动态切换多个 class

  • :class 指令也可以与普通的 class 属性共存

  • 实例：text-danger 类背景颜色覆盖了 active 类的背景色：

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        v-bind:class可以缩写为 :class --><div :class="{'active': isActive, 'text-danger': hasError}" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// isActive为false则不显示isActive: false,hasError: true}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上实例 div class 渲染结果为：

    <div class="text-danger static"></div>

    在这里插入图片描述

  • 当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为 "static active text-danger"。
    在这里插入图片描述

1.3 直接绑定数据里的一个对象

  • text-danger 类背景颜色覆盖了 active 类的背景色

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 直接绑定数据里的一个对象</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="classObject" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     返回类型为一个对象classObject: {// isActive为false则不显示// isActive: true,'active': false,'text-danger': true}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上实例 div class 渲染结果为：

    <div class="text-danger static"></div>

    在这里插入图片描述

    • 当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为 "static active text-danger"。

在这里插入图片描述

1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式

  • 也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 绑定一个返回对象的计算属性。这是一个常用且强大的模式</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="classObject" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值isActive: true,error: null}},//     定义计算属性 为一个对象computed: {classObject () {// 定义对象返回值return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上代码的渲染结果为：

    <div class="active static"></div>

    在这里插入图片描述

1. 5 数据语法

  • 可以把一个数组传给 v-bind:class，实例如下:

    <div :class="[activeClass, errorClass]" class="static"></div>

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 可以把一个数组传给 v-bind:class </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="[activeClass, errorClass]" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值activeClass: 'active',errorClass: 'text-danger'}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上代码渲染结果：<div class="active text-danger static"></div>

    在这里插入图片描述

1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="[isActive ? activeClass : errorClass]" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值isActive: true,activeClass: 'active',errorClass: 'text-danger'}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：isActive为true显示绿色，isActive为false显示红色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 以上实例的渲染结果:<div class="active static"></div>

    在这里插入图片描述

2. Vue.js style(内联样式)

2.1 v-bind:style 直接设置样式

  • 可以在 v-bind:style 直接设置样式，可以简写为 :style
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 直接设置样式 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {activeColor: 'red',fontSize: 30}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上代码渲染结果为:<div style="color: red; font-size: 30px;">v-bind:style 直接设置样式</div>

    在这里插入图片描述

2.2 直接绑定到一个样式对象

  • 也可以直接绑定到一个样式对象，让模板更清晰：

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 直接设置样式 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="styleObject">v-bind:style 绑定样式对象</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     设置返回结果为一个样式对象styleObject: {color: "red",fontSize: "30px"}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上代码的渲染结果：<div style="color: red; font-size: 30px;">v-bind:style 绑定样式对象</div>
    在这里插入图片描述

2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上

  • v-bind:style 可以使用数组将多个样式对象应用到一个元素上

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 可以使用数组将多个样式对象应用到一个元素上 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="[baseStyles, overridingStyle]">v-bind:style 绑定样式对象</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     设置返回结果为一个样式对象baseStyles: {color: "green",fontSize: "30px"},overridingStyle: {'font-weight': 'bold'}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

    在这里插入图片描述

  • 上述案例渲染结果：<div style="color: green; font-size: 30px; font-weight: bold;">v-bind:style 绑定样式对象</div>

    在这里插入图片描述

  • 注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

2.4 多重值

  • 可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

  • 这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

3. 组件上使用 class 属性

3.1 带有单个根元素的自定义组件上使用 class 属性

  • 当在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  当你在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用自定义的全局组件runoob--><runoob class="classC classD"></runoob></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = Vue.createApp({})//     在HelloVueApp组件上创建一个新全局组件
// 在自定义组件上使用class属性，这些属性会被添加到该元素上HelloVueApp.component('runoob', {template: '<h1 class="classA classB">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>'})//     创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount('#app')</script>
</body>
</html>

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

    在这里插入图片描述
    以上实例渲染结果：<h1 class="classA classB classC classD">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>
    在这里插入图片描述

  • 对于带数据绑定 class 也同样适用：

    <my-component :class="{ active: isActive }"></my-component>

  • 当 isActive 为 true 时，HTML 将被渲染成为：

    <p class="active">Hi</p>

3.2 组件有多个根元素

  • 组件有多个根元素，需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作

    template 中 ` 是反引号，不是单引号 ’

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用自定义的全局组件runoob--><runoob class="classA"></runoob></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = Vue.createApp({})//     在HelloVueApp组件上创建一个新全局组件 含多个根元素HelloVueApp.component('runoob', {template: `<p :class="$attrs.class">组件有多个根元素 使用 $attrs 组件属性执行此操作</p><span>这是runoob的子组件</span>`})//     创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount('#app')</script>
</body>
</html>

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

  • 以上代码渲染结果：

    <p class="classA">组件有多个根元素 使用 $attrs 组件属性执行此操作</p>
<span>这是runoob的子组件</span>

    在这里插入图片描述

相关文章：

Vue3样式绑定

文章目录 Vue3样式绑定1. class 属性绑定1.1 v-bind:class 设置一个对象&#xff0c;从而动态的切换 class1.2 在对象中传入更多属性用来动态切换多个 class1.3 直接绑定数据里的一个对象1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式1. 5 数据语法1.6 errorClass…...

编程日记 2023/9/15 1:00:58

【深度学习】 Python 和 NumPy 系列教程（廿二）：Matplotlib详解：2、3d绘图类型（8）3D饼图（3D Pie Chart）

一、前言 Python是一种高级编程语言&#xff0c;由Guido van Rossum于1991年创建。它以简洁、易读的语法而闻名&#xff0c;并且具有强大的功能和广泛的应用领域。Python具有丰富的标准库和第三方库&#xff0c;可以用于开发各种类型的应用程序&#xff0c;包括Web开发、数据分…...

编程日记 2023/9/15 0:56:54

数仓主题域和数据域、雪花模型，星型模型和星座模型

数仓模型和领域划分 一、主题域和数据域的差别二、雪花模型&#xff0c;星座模型和星型模型 一、主题域和数据域的差别 明确数据域作为数仓搭建的重要一环&#xff0c;能够让数仓的数据便于管理和应用。 数据域和主题域都是数据仓库中的重要概念&#xff0c;但含义略有不同&am…...

编程日记 2023/9/15 0:55:54

黑马头条 热点文章实时计算、kafkaStream

热点文章-实时计算 1 今日内容 1.1 定时计算与实时计算 1.2 今日内容 kafkaStream 什么是流式计算kafkaStream概述kafkaStream入门案例Springboot集成kafkaStream 实时计算 用户行为发送消息kafkaStream聚合处理消息更新文章行为数量替换热点文章数据 2 实时流式计算 2…...

编程日记 2023/9/15 0:50:48

数据分析：利用gpt进行归因分析

prompt&#xff1a; 你是某电商平台的一名数据分析师&#xff0c;发现昨日的GMV环比下降了5%&#xff0c;请对这数据变动做出归因。 output&#xff1a; 在电商行业中&#xff0c;GMV&#xff08;总销售额&#xff09;是一个非常重要的指标&#xff0c;用于衡量业务的整体健康…...

编程日记 2023/9/15 0:49:47

Python工程师Java之路（p）Module和Package

文章目录 1、Python的Module和Package2、Java的Module和Package2.1、Module2.1.1、分模块开发意义2.1.2、模块的调用 2.2、Package Module通常译作模块&#xff0c;Package通常译作包 1、Python的Module和Package Python模块&#xff08;Module&#xff09;&#xff1a;1个以.…...

编程日记 2023/9/15 0:45:43

某计费管理系统任意文件读取漏洞

文章目录 声明一、漏洞描述二、漏洞复现声明 请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失，均由使用者本人负责，所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 一、漏洞描述 蓝海…...

编程日记 2023/9/15 0:42:41

LeetCode:1929.数组串联

1929. 数组串联 来源：力扣（LeetCode） 链接: https://leetcode.cn/problems/concatenation-of-array/description/ 给你一个长度为 n 的整数数组 nums 。请你构建一个长度为 2n 的答案数组 ans ，数组下标 从 0 开始计数 ，对于所有 0 < = i < n 0 <= i < n …...

编程日记 2023/9/15 0:41:40

记录：移动设备软件开发（activity组件）

目录 前言Android简介和发展Android应用的基本组件介绍Activity组件Activity简介Activity的状态和生命周期 小结 前言 移动设备软件开发是指为智能手机、平板电脑等移动设备设计和开发应用程序的过程。移动设备软件开发涉及多种技术、平台和工具&#xff0c;例如Android、iOS、…...

编程日记 2023/9/15 0:40:38

Redis常用应用场景

Redis是一款开源的基于内存的键值存储系统&#xff0c;它提供了多种数据结构和丰富的功能&#xff0c;适用于各种不同的应用场景。以下是Redis常用的应用场景&#xff1a; 1.缓存&#xff1a;Redis最常见的用途就是作为缓存。由于Redis存储在内存中&#xff0c;读取速度非常快…...

编程日记 2023/9/15 0:38:35

grafana 监控无图解决

环境 k8s 1.26.0 helm 部署的prometheus charts为 prometheus-community/kube-prometheus-stack 问题 部署上之后，发现grafana很多dashboard无图。 处理过程 进grafana dashboards 任意选取一张有问题的图，查看查询语句，如下 sum(container_memory_rss{job="kube…...

编程日记 2023/9/15 0:37:35

Linux--进程-消息队列

一、 消息队列&#xff0c;是消息的链接表&#xff0c;存放在内核中。一个消息队列有一个人标识符&#xff08;及队列ID&#xff09;来标识。 1、特点&#xff1a; ①、消息队列是面向记录的&#xff0c;其中的消息具有特定的格式以及待定的优先级。 ②、消息队列独立与发送与…...

编程日记 2023/9/15 0:36:33

MySQL下载安装环境变量配置，常用命令

一、下载安装 mysql官网 下载连接 这个是下载图形安装 https://dev.mysql.com/downloads/installer/ 这个是下载免图形安装 https://dev.mysql.com/downloads/mysql/ 担心个别宝宝没有账号&#xff0c;这边也提供一下&#xff0c;方便下载&#xff1a; 账户&#xff1a;1602404…...

编程日记 2023/9/15 0:35:32

HSRP（热备份路由选择协议）的概念，原理与配置实验

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 梦想从未散场&#xff0c;传奇永不落幕&#xff0c;持续更新优质网络知识、Python知识、Linux知识以及各种小技巧&#xff0c;愿你我共同在CSDN进步 目录 一、了解HSRP协议 1. 什么是HSRP协议 2、HSRP协议的…...

编程日记 2023/9/15 0:33:28

数据可视化大屏模板 | 保姆级使用教程

近来很多朋友私信咨询怎么下载使用数据可视化大屏模板&#xff0c;在这里就给大家做一个相对简单的教程总结。有需要的朋友记得先收藏保存&#xff0c;以便不时之需。 数据可视化大屏制作软件&#xff1a;奥威BI系统 数据可视化报表模板板块&#xff1a;模板秀 主要操作&…...

编程日记 2023/9/15 0:31:26

qml怎么显示网页

QML显示网页需要使用Qt WebEngine模块，它提供了一个WebEngineView组件，可以用来在QML中显示和交互网页。 首先，确保你已经安装了Qt WebEngine模块。如果你使用的是Qt的在线安装程序，你可以通过Qt Maintenance Tool来添加这个模块。 以下是如何在QML中使用WebEngineView来…...

编程日记 2023/9/15 0:28:23

leetcode分类刷题：二叉树（一、简单的层序遍历）

二叉树的深度优先遍历题目是让我有点晕&#xff0c;先把简单的层序遍历总结下吧&#xff1a;配合队列进行的层序遍历在逻辑思维上自然直观&#xff0c;不容易出错 102. 二叉树的层序遍历 本题是二叉树的层序遍历模板&#xff1a;每次循环将一层节点出队&#xff0c;再将一层节点…...

编程日记 2023/9/15 0:26:21

STM32 CAN使用记录：FDCAN基础通讯

文章目录 目的关键配置与代码轮询方式中断方式收发测试 示例链接总结 目的 CAN是非常常用的一种数据总线&#xff0c;被广泛用在各种车辆系统中。这篇文章将对STM32中FDCAN的使用做个示例。 CAN的一些基础介绍与使用可以参考下面文章&#xff1a; 《CAN基础概念》https://blo…...

编程日记 2023/9/15 0:25:20

GB/T 11945-2019 蒸压灰砂实心砖和实心砌块检测

蒸压灰砂砖是以砂、石灰为主要原料&#xff0c;经坯料制备&#xff0c;压制成型、蒸压养护而成的实心砖&#xff0c;简称灰砂砖&#xff0c;具有良好的耐久性能和强度。 GB/T 11945-2019蒸压灰砂实心砖和实心砌块检测&#xff1a; 测试要求 测试标准 抗压强度 GB/T 2542 GB…...

编程日记 2023/9/15 0:23:18

echarts静态饼图

<div class"cake"><div id"cakeChart"></div></div> import * as echarts from "echarts";mounted() {this.$nextTick(() > {this.getCakeEcharts()})},methods: {// 饼状图getCakeEcharts() {let cakeChart echart…...

编程日记 2023/9/15 0:22:17

Linux中的apt与yum

Linux中的apt与yum apt和yum区别 apt和yum执行流程 apt和yum区别 apt 和 yum 是两种不同的包管理工具&#xff0c;用于在 Linux 操作系统中安装、升级和删除软件包。它们主要用于不同的 Linux 发行版。 命令适用系统aptUbuntu、DebianyumCentOS、Redhat 也就是说&#xff0…...

编程日记 2023/9/15 0:21:16

DQN算法概述及基于Pytorch的DQN迷宫实战代码

一. DQN算法概述 1.1 算法定义 Q-Learing是在一个表格中存储动作对应的奖励值&#xff0c;即状态-价值函数Q(s,a)&#xff0c;这种算法存在很大的局限性。在现实中很多情况下&#xff0c;强化学习任务所面临的状态空间是连续的&#xff0c;存在无穷多个状态&#xff0c;这种情…...

编程日记 2023/9/15 0:18:13

Pytorch学习整理笔记（一）

文章目录 数据处理DatasetTensorboard使用Transformstorchvision数据集使用DataLoader使用nn.Module的使用神经网络 数据处理Dataset 主要是对Dataset的使用&#xff1a; 继承 Dataset实现init方法&#xff0c;主要是进行一些全局变量的定义&#xff0c;在对其初始化时需要赋…...

编程日记 2023/9/15 0:17:12

paddlespeech asr脚本demo

概述 paddlespeech是百度飞桨平台的开源工具包&#xff0c;主要用于语音和音频的分析处理&#xff0c;其中包含多个可选模型&#xff0c;提供语音识别、语音合成、说话人验证、关键词识别、音频分类和语音翻译等功能。 本文介绍利用ps中的asr功能实现批量处理音频文件的demo。…...

编程日记 2023/9/15 0:16:10

算法分析与设计编程题 递归与分治策略

棋盘覆盖 题目描述 解题代码 // para: 棋盘&#xff0c;行偏移&#xff0c;列偏移&#xff0c;特殊行&#xff0c;特殊列 void dividedCovering(vector<vector<int>>& chessBoard, int dr, int dc, int sr, int sc, int size) {if (size 1) return;size / 2…...

编程日记 2023/9/15 0:14:09

Java的XWPFTemplate工具类导出word.docx的使用

依赖 <!-- word导出 --><dependency><groupId>com.deepoove</groupId><artifactId>poi-tl</artifactId><version>1.7.3</version></dependency><!-- 上面需要的依赖--><dependency><groupId>org.ap…...

编程日记 2023/9/15 0:05:58

Science adv | 转录因子SPIC连接胚胎干细胞中的细胞代谢与表观调控

代谢是生化反应网络的结果&#xff0c;这些反应吸收营养物质并对其进行处理&#xff0c;以满足细胞的需求&#xff0c;包括能量产生和生物合成。反应的中间体被用作各种表观基因组修饰酶的底物和辅助因子&#xff0c;因此代谢与表观遗传密切相关。代谢结合表观遗传涉及疾病&…...

编程日记 2023/9/15 0:04:57

机器学习实战-系列教程7：SVM分类实战2线性SVM（鸢尾花数据集/软间隔/线性SVM/非线性SVM/scikit-learn框架）项目实战、代码解读

&#x1f308;&#x1f308;&#x1f308;机器学习 实战系列 总目录 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 SVM分类实战1之简单SVM分类 SVM分类实战2线性SVM SVM分类实战3非线性SVM 3、不同软间隔C值 3.1 数据标准化的影响 如图左边是没…...

编程日记 2023/9/15 0:02:55

DOM渲染与优化 - CSS、JS、DOM解析和渲染阻塞问题

文章目录 DOM渲染面试题DOM的渲染过程DOM渲染的时机与渲染进程的概述浏览器的渲染流程1. 解析HTML生成DOM树&#xff1a;遇到<img>标签加载图片2. 解析CSS生成CSSOM(CSS Object Model): 遇见背景图片链接不加载3. 将DOM树和CSSOM树合并生成渲染树&#xff1a;加载可视节点…...

编程日记 2023/9/15 0:01:54

基于小程序的理发店预约系统

一、项目背景及简介 现在很多的地方都在使用计算机开发的各种管理系统来提高工作的效率&#xff0c;给人们带来很多的方便。计算机技术从很大的程度上解放了人们的双手&#xff0c;并扩大了人们的活动范围&#xff0c;是人们足不出户就可以通过电脑进行各种事情的管理。信息系…...

编程日记 2023/9/14 23:59:52