v-if及v-for、computed计算属性的使用

news2024/11/22 10:35:22

v-if 概念及使用

v-if是Vue.js中的一个指令，用于根据表达式的真假值条件性地渲染一块内容。如果表达式的值返回真，则Vue会渲染这块内容；如果返回假，则不渲染。

基本用法:

<p v-if="isVisible">看到我了吗？</p>

在这个例子中，只有当isVisible的值为true时，<p>标签才会被渲染。

v-for 概念及使用

v-for是Vue.js中的一个指令，用于基于源数据多次渲染元素或模板块。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，item是为数组元素提供的别名。

基本用法:

<ul>
  <li v-for="item in items">{{ item.text }}</li>
</ul>

这里，对于items数组中的每个元素，都会渲染一个<li>标签，并显示其text属性的值。

结合使用原理及例子

当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。这意味着v-if将分别作用于每个v-for循环迭代中的元素。然而，Vue官方推荐尽量避免同时使用v-if和v-for。如果需要这样做，考虑通过计算属性先过滤列表。

结合使用的例子:

假设你有一个任务列表，但只想显示未完成的任务：

<ul>
  <li v-for="task in tasks" v-if="!task.isCompleted">{{ task.description }}</li>
</ul>

在上面的代码中，每个任务都会被v-for遍历，但只有当task.isCompleted为false时（即任务未完成时），对应的任务描述才会被渲染。

更好的做法是使用计算属性:

computed: {
  unfinishedTasks() {
    return this.tasks.filter(task => !task.isCompleted);
  }
}

然后在模板中使用这个计算属性：

<ul>
  <li v-for="task in unfinishedTasks">{{ task.description }}</li>
</ul>

这种方法更清晰，并且性能更好，因为它避免了在每次渲染中对列表的重复评估和过滤，而是只在任务列表发生变化时才重新计算过滤后的列表。

下面我们通过例子进行详解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="../vue 初识/vue.js"></script>
  <style>
    table,tr,th,td{
      border: 1px solid red;
      border-collapse: collapse;
    }
    th ,td{
      width: 200px;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
  </style>
</head>
<body>
<div id="app">
  <!--vue标签判断-->
  <div v-if="this.age > 18">
    <div>成人</div>
      <ul>
        <li>江西</li>
        <li>湖南</li>
        <li>四川</li>
      </ul>
  </div>
  <div v-else>
    <div>儿童</div>
      <ul>
        <li>动漫</li>
        <li>故事会</li>
        <li>武侠</li>
      </ul>
  </div>

  <table >
    <tr>
      <th>序号</th>
      <th>书名</th>
      <th>价格</th>
      <th>出版社</th>
    </tr>
    <tr v-for="(book,index) in books">
      <td>{{index+1}}</td>
      <td>{{book.name}}</td>
      <td>{{book.price}}</td>
      <td>{{book.publish}}</td>
    </tr>
  </table>
</div>

<!--vue标签控制-->
<script>
    const app={
      data(){
        return{
            use:"liqiang" ,
            age:18,
            books:[
              {name:"水浒传",price:3999,publish:"人民出版社"},
              {name:"红楼梦",price:299,publish:"机械出版社"},
              {name:"西游记",price:399,publish:"西瓜出版社"},
              {name:"西厢记",price:499,publish:"香蕉出版社"}
            ]
        }
      }
    }
    vm=Vue.createApp(app).mount('#app')
</script>
</body>
</html>

页面展示效果如下图：
在这里插入图片描述
如果此刻想对价格进行过滤该如何操作？比如只显示价格大于500的书籍？
解决方法一：

    <template v-for="(book,index) in books">
      <tr v-if="book.price > 500" >
        <td>{{index+1}}</td>
        <td>{{book.name}}</td>
        <td>{{book.price}}</td>
        <td>{{book.publish}}</td>
      </tr>
    </template>

但是这种方法只是传统解决办法，不是vue3.0官方解决办法。
解决方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="../vue 初识/vue.js"></script>
  <style>
    table,tr,th,td{
      border: 1px solid red;
      border-collapse: collapse;
    }
    th ,td{
      width: 200px;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
  </style>
</head>
<body>
<div id="app">
  <!--vue标签判断-->
  <div v-if="this.age > 18">
    <div>成人</div>
      <ul>
        <li>江西</li>
        <li>湖南</li>
        <li>四川</li>
      </ul>
  </div>
  <div v-else>
    <div>儿童</div>
      <ul>
        <li>动漫</li>
        <li>故事会</li>
        <li>武侠</li>
      </ul>
  </div>

  <table >
    <tr>
      <th>序号</th>
      <th>书名</th>
      <th>价格</th>
      <th>出版社</th>
    </tr>
    <tr v-for="(book,index) in filterBooks">
      <td>{{index+1}}</td>
      <td>{{book.name}}</td>
      <td>{{book.price}}</td>
      <td>{{book.publish}}</td>
    </tr>
  </table>
</div>

<!--vue标签控制-->
<script>

  const app={
      data(){
        return{
            use:"liqiang" ,
            age:18,
            books:[
              {name:"水浒传",price:3999,publish:"人民出版社"},
              {name:"红楼梦",price:299,publish:"机械出版社"},
              {name:"西游记",price:899,publish:"西瓜出版社"},
              {name:"西厢记",price:499,publish:"香蕉出版社"}
            ]
        }
      },
      methods:{
      },
      computed:{
          //先对books的数据进行过滤计算
          filterBooks(){
            let newBooks = []
             for (i=0;i<this.books.length;i++){
                if (this.books[i].price>500){
                  newBooks.push(this.books[i])
                }
             }
             console.log(newBooks)
             return newBooks
          }
      }
    }
    vm=Vue.createApp(app).mount('#app')
</script>
</body>
</html>

如图：
在这里插入图片描述方法三，官方推荐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="../vue 初识/vue.js"></script>
  <style>
    table,tr,th,td{
      border: 1px solid red;
      border-collapse: collapse;
    }
    th ,td{
      width: 200px;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
  </style>
</head>
<body>
<div id="app">
  <!--vue标签判断-->
  <div v-if="this.age > 18">
    <div>成人</div>
      <ul>
        <li>江西</li>
        <li>湖南</li>
        <li>四川</li>
      </ul>
  </div>
  <div v-else>
    <div>儿童</div>
      <ul>
        <li>动漫</li>
        <li>故事会</li>
        <li>武侠</li>
      </ul>
  </div>

  <table >
    <tr>
      <th>序号</th>
      <th>书名</th>
      <th>价格</th>
      <th>出版社</th>
    </tr>
    <tr v-for="(book,index) in filterBooks2">
      <td>{{index+1}}</td>
      <td>{{book.name}}</td>
      <td>{{book.price}}</td>
      <td>{{book.publish}}</td>
    </tr>
  </table>
</div>
<!--vue标签控制-->
<script>

  const app={
      data(){
        return{
            use:"liqiang" ,
            age:18,
            books:[
              {name:"水浒传",price:3999,publish:"人民出版社"},
              {name:"红楼梦",price:299,publish:"机械出版社"},
              {name:"西游记",price:899,publish:"西瓜出版社"},
              {name:"西厢记",price:499,publish:"香蕉出版社"}
            ]
        }
      },
      methods:{
      },
      computed:{
          //先对books的数据进行过滤计算
          filterBooks2(){
            return this.books.filter(function (item){
            // 便利所有的books，赋值给数组
                console.log("item",item)
                return item.price>500
              })
          }
      }
    }
    vm=Vue.createApp(app).mount('#app')
</script>
</body>
</html>

效果如下：
在这里插入图片描述
filterBooks2 是一个 Vue 实例中定义的计算属性（computed属性）。计算属性是基于它们的响应式依赖进行缓存的。只有在相关响应式依赖发生改变时，它们才会重新求值。这意味着只要 books 数组或数组内对象的 price 属性没有发生变化，filterBooks2 将不会重新计算，从而提高应用的性能。

在给出的代码段中，filterBooks2 方法通过 filter 函数过滤 books 数组，返回所有 price 大于 500 的书籍。filter 函数是 JavaScript 中的数组方法之一，它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。条件检查是在回调函数中完成的，每个数组元素都会执行一次回调函数。

接下来，我们逐行解释一下filterBooks2：

filterBooks2(){
    return this.books.filter(function (item){
        console.log("item",item) // 打印当前正在处理的书籍对象
        return item.price>500    // 判断当前书籍的价格是否大于500
        console.log("item",item) // 这行代码不会被执行，因为return语句已经结束了函数执行
    })
}

关键点解释

  1. filter 方法的回调函数：this.books.filter(function (item){...}) 中的 function(item) 是 filter 方法的回调函数，item 表示数组中的当前遍历到的元素。在这个场景下，item 代表 books 数组中的一个书籍对象。

  2. 判断条件 item.price>500：这是 filter 方法的核心判断逻辑，用来检查当前书籍对象的 price 属性是否大于 500。

  3. 返回值：filter 方法会创建一个新数组，包含所有通过测试（即函数返回 true）的元素。在本例中，所有价格大于500的书籍对象会被包含在返回的新数组中。

  4. console.log的位置：在 return 语句之后的 console.log("item",item) 实际上是无法到达的代码，因为 return 语句执行后，函数的执行已经结束了，之后的代码将不会被执行。因此，如果你在测试或调试时需要查看item的值，需要确保 console.log 在 return 语句之前。

实验二：

下面我想实现当选出的价格大于500时候，背景颜色变为橘黄色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="../vue 初识/vue.js"></script>
  <style>
    table,tr,th,td{
      border: 1px solid red;
      border-collapse: collapse;
    }
    th ,td{
      width: 200px;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }

    .co{
      background-color: orange;
    }

  </style>
</head>
<body>
<div id="app">
  <!--vue标签判断-->
  <div v-if="this.age > 18">
    <div>成人</div>
      <ul>
        <li>江西</li>
        <li>湖南</li>
        <li>四川</li>
      </ul>
  </div>
  <div v-else>
    <div>儿童</div>
      <ul>
        <li>动漫</li>
        <li>故事会</li>
        <li>武侠</li>
      </ul>
  </div>

  <table >
    <tr>
      <th>序号</th>
      <th>书名</th>
      <th>价格</th>
      <th>出版社</th>
    </tr>
    <!--添加样式-->
    <tr v-for="(book,index) in filterBooks2" :class="classes">
      <td>{{index+1}}</td>
      <td>{{book.name}}</td>
      <td>{{book.price}}</td>
      <td>{{book.publish}}</td>
    </tr>
  </table>
</div>
<!--vue标签控制-->
<script>

  const app={
      data(){
        return{
            use:"liqiang" ,
            age:18,
            books:[
              {name:"水浒传",price:3999,publish:"人民出版社"},
              {name:"红楼梦",price:2499,publish:"机械出版社"},
              {name:"西游记",price:899,publish:"西瓜出版社"},
              {name:"西厢记",price:499,publish:"香蕉出版社"}
            ],
          classes: {co: true}
        }
      },
      computed:{
          //先对books的数据进行过滤计算
          filterBooks(){
            let newBooks = []
             for (i=0;i<this.books.length;i++){
                if (this.books[i].price>500){
                  newBooks.push(this.books[i])
                }
             }
             console.log(newBooks)
             return newBooks
          },
          filterBooks2(){
            return this.books.filter(function (item){
                console.log("item",item)
                return item.price>500
              })
          }
      }
    }
    vm=Vue.createApp(app).mount('#app')
</script>
</body>
</html>

实现效果如下：
在这里插入图片描述

根据书籍价格来改变样式，直接在模板中使用条件绑定会更加直接和高效。

实验三

下面我希望显示所有书籍并且，价格大于500的背景色的为橘黄色怎么实现？这里我们采用三元运算符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="../vue 初识/vue.js"></script>
  <style>
    table,tr,th,td{
      border: 1px solid red;
      border-collapse: collapse;
    }
    th ,td{
      width: 200px;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }

    .co{
      background-color: orange;
    }

  </style>
</head>
<body>
<div id="app">
  <!--vue标签判断-->
  <div v-if="this.age > 18">
    <div>成人</div>
      <ul>
        <li>江西</li>
        <li>湖南</li>
        <li>四川</li>
      </ul>
  </div>
  <div v-else>
    <div>儿童</div>
      <ul>
        <li>动漫</li>
        <li>故事会</li>
        <li>武侠</li>
      </ul>
  </div>

  <table >
    <tr>
      <th>序号</th>
      <th>书名</th>
      <th>价格</th>
      <th>出版社</th>
    </tr>
    <tr v-for="(book,index) in books" :class="book.price>500?'co':''">
      <td>{{index+1}}</td>
      <td>{{book.name}}</td>
      <td>{{book.price}}</td>
      <td>{{book.publish}}</td>
    </tr>
  </table>
</div>
<!--vue标签控制-->
<script>
  const app={
      data(){
        return{
            use:"liqiang" ,
            age:18,
            books:[
              {name:"水浒传",price:99,publish:"人民出版社"},
              {name:"红楼梦",price:2499,publish:"机械出版社"},
              {name:"西游记",price:899,publish:"西瓜出版社"},
              {name:"西厢记",price:499,publish:"香蕉出版社"}
            ],
          classes: {co: true}
        }
      },
      computed:{
          //先对books的数据进行过滤计算
          filterBooks(){
            let newBooks = []
             for (i=0;i<this.books.length;i++){
                if (this.books[i].price>500){
                  newBooks.push(this.books[i])
                }
             }
             console.log(newBooks)
             return newBooks
          },
          filterBooks2(){
            return this.books.filter(function (item){
                console.log("item",item)
                return item.price>500
              })
          }
      }
    }
    vm=Vue.createApp(app).mount('#app')
</script>
</body>
</html>

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

针对三元运算符进行详解：
在Vue.js中，使用:class绑定时候，如果条件判断需要根据结果选择不同的类名，通常会用到三元运算符，格式如下:

:class="condition ? 'trueClassName' : 'falseClassName'"

这里的condition是你要检查的条件，trueClassName是当条件为真（true）时要添加的类名，而falseClassName是条件为假（false）时要添加的类名。在这种情况下，类名是字符串类型的值，因此它们需要被引号（单引号'或双引号"）包围。

在例子中：

:class="book.price>500 ? 'co' : ''"
  • 当book.price > 500为真时，将为元素添加'co'类名。这里的'co'就是一个字符串，代表某个具体的CSS类，用来改变该<tr>元素的样式。此类名外必须用引号包围，因为它是一个字符串。
  • 当条件为假时，元素不会添加任何类名，因此使用一对空引号''代表空字符串，也就是说，不添加任何类名。这对空引号同样表明这里是一个字符串类型的值，虽然它是空的。

引号的使用是因为CSS类名在JavaScript（因此也包括Vue.js模板表达式中）是作为字符串处理的，不管是具有实际名称的字符串，还是一个空字符串。不使用引号的话，JavaScript会试图将其解释为变量或其他表达式，从而引发语法或逻辑错误。

小结

通过 filterBooks2 计算属性，可以得到一个包含所有价格大于 500 的书籍的数组。这是在 Vue 应用中处理数组和展示过滤结果的一种高效方法。使用计算属性可以确保数据处理逻辑简洁且可维护，同时 Vue 的响应式系统会帮你确保数据的更新能够正确反映在 UI 上。

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

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

相关文章

【TI毫米波雷达】CLI模块初始化，demo工程覆写CLI控制指令代码的操作方式（以IWR6843AOP为例）

【TI毫米波雷达】CLI模块初始化，demo工程覆写CLI控制指令代码的操作方式（以IWR6843AOP为例）

【TI毫米波雷达】CLI模块初始化&#xff0c;demo工程覆写CLI控制指令代码的操作方式&#xff08;以IWR6843AOP为例&#xff09; 本文主要针对demo工程 通过覆写CLI配置 跳过CLI配置命令 以此来达到自动配置参数 并控制雷达的功能 在此期间不开启CLI和相关初始化 只是针对CLI控…
阅读更多...
穿越时空的视觉盛宴：古董展览可视化大屏的魅力

穿越时空的视觉盛宴：古董展览可视化大屏的魅力

在我们的生活中&#xff0c;科技与传统的交融已经变得无处不在。走进古董的世界&#xff0c;仿佛打开了时光的闸门&#xff0c;每一件古董都承载着千年的故事与历史。然而&#xff0c;传统的古董展览方式&#xff0c;往往受限于空间和展示手段&#xff0c;难以让每一位观众深入…
阅读更多...
在CentOS 7 中配置 YUM源

在CentOS 7 中配置 YUM源

目录 YUM源的功能&#xff1a; YUM 源的安装过程 ps YUM工具 配置YUM仓库/YUM源 网络源&#xff1a;使用官方源 前提&#xff1a;联网 YUM源的功能&#xff1a; YUM&#xff08;Yellowdog Updater Modified&#xff09;是一个在Red Hat、CentOS、Fedora等基于RPM的Linux发…
阅读更多...
八种Flink任务监控告警方式

八种Flink任务监控告警方式

目录 一、Flink应用分析 1.1 Flink任务生命周期 1.2 Flink应用告警视角分析 二、监控告警方案说明 2.1 监控消息队中间件消费者偏移量 2.2 通过调度系统监控Flink任务运行状态 2.3 引入开源服的SDK工具实现 2.4 调用FlinkRestApi实现任务监控告警 2.5 定时去查询目标库…
阅读更多...
[网络安全] IIS----WEB服务器

[网络安全] IIS----WEB服务器

一、 WEB服务器 WEB服务器 也叫网页服务器和 HTTP服务器使用协议: HTTP(端口:80) 或 HTTPS(端口443)浏览器:HTTP客户端网站: 一个或多个网页组成的集合 二、HTTP和HTTPS协议: HTTP : 是 HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09;的简写&#xff0c;…
阅读更多...
[数据结构与算法]贪心算法（原理+代码）

[数据结构与算法]贪心算法（原理+代码）

博主介绍&#xff1a;✌专研于前后端领域优质创作者、本质互联网精神开源贡献答疑解惑、坚持优质作品共享、掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战&#xff0c;深受全网粉丝喜爱与支持✌有需要可以联系作者我哦&#xff01; &#x1f447;&#…
阅读更多...
HarmonyOS-Stage模型开发概述

HarmonyOS-Stage模型开发概述

Stage模型开发概述 基本概念 下图展示了Stage模型中的基本概念。 图1 Stage模型概念图 UIAbility组件和ExtensionAbility组件 Stage模型提供UIAbility和ExtensionAbility两种类型的组件&#xff0c;这两种组件都有具体的类承载&#xff0c;支持面向对象的开发方式。 UIAbili…
阅读更多...
力扣hot100 无重复字符的最长子串 双指针 滑动窗口 哈希

力扣hot100 无重复字符的最长子串 双指针 滑动窗口 哈希

Problem: 3. 无重复字符的最长子串 文章目录 思路Code 思路 &#x1f468;‍&#x1f3eb; 参考 Code ⏰ 时间复杂度: O ( n ) O(n) O(n) &#x1f30e; 空间复杂度: O ( 1 ) O(1) O(1) class Solution {public int lengthOfLongestSubstring(String s){if (s null ||…
阅读更多...
Quartus生成烧录到FPGA板载Flash的jic文件

Quartus生成烧录到FPGA板载Flash的jic文件

简要说明&#xff1a; Altera的FPGA芯片有两种基本分类&#xff0c;一类是纯FPGA&#xff0c;另一类是FPGASoc&#xff08;System on chip)&#xff0c;也就是FPGAHPS&#xff08;Hard Processor System&#xff0c;硬核处理器&#xff09;&#xff0c;对应两种Flash烧录方式&a…
阅读更多...
算法模板 2.差分

算法模板 2.差分

差分和前缀和是逆运算 差分数组可以将对a数组任意区间的加/减操作优化到O ( 1 ) 一维差分 797. 差分 - AcWing题库 #include <bits/stdc.h> using namespace std; const int N 100010; int a[N], b[N];void insert(int l, int r, int c){b[l] c; //表示l以后&#x…
阅读更多...
消息中间件之RocketMQ源码分析(三)

消息中间件之RocketMQ源码分析(三)

RocketMQ中的Consumer启动流程 RocketMQ客户端中有两个独立的消费者实现类分别为DefaultMQPullConsumer和DefaultMQPushConsumer&#xff0c; DefaultMQPullConsumer DefaultMQPullConsumer,该消费者使用时需要用户主动从Broker中Pull消息和消费消息&#xff0c;提交消费位点…
阅读更多...
Altium Designer的学习

Altium Designer的学习

PCB设计流程 1.新建空白工程&#xff1a; 创建一个新的工程 新建四个文件&#xff0c;并且保存&#xff1a; 每次打开文件时&#xff0c;打开以.PrjPcb结尾的文件 2.元件符号的创建&#xff1a; 在绘制图形的时候设置成10mil,为了在原理图中显得不那么大。 在绘制引脚的时候设…
阅读更多...
外星人入侵（python）

外星人入侵（python）

前言 代码来源《python编程从入门到实践》Eric Matthes 署 袁国忠 译 使用软件&#xff1a;PyCharm Community Editor 2022 目的&#xff1a;记录一下按照书上敲的代码 alien_invasion.py 游戏的一些初始化设置&#xff0c;调用已经封装好的函数方法&#xff0c;一个函数的…
阅读更多...
将vant地区数据改为label value children格式

将vant地区数据改为label value children格式

以下代码放到nodejs中运行 a.js文件内容&#xff0c;vant的数据&#xff0c;来自import { areaList } from vant/area-data&#xff0c;形如&#xff1a; const fs require(fs);const a require(./a.js);const b transformData(a); fs.writeFileSync(./b.js, JSON.string…
阅读更多...
STM32G4 系列命名规则

STM32G4 系列命名规则

STM32G4产品线 基础型系列STM32G4x1 具有入门级模拟外设配置&#xff0c;单存储区Flash&#xff0c;支持的Flash存储器容量范围从32到512KB。 增强型系列STM32G4x3 与基本型器件相比具有更多数量的模拟外设&#xff0c;以及双存储区Flash&#xff0c;Flash存储器容量也提高…
阅读更多...
如何在Windows系统使用Plex部署影音服务与公网访问本地资源【内网穿透】

如何在Windows系统使用Plex部署影音服务与公网访问本地资源【内网穿透】

文章目录 1.前言2. Plex网站搭建2.1 Plex下载和安装2.2 Plex网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通…
阅读更多...
Spring-mybatis

Spring-mybatis

怎样通过Spring整合Mybatis来实现业务 目录 1.导入依赖 <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>3.8.1</version><scope>test</scope></dependency>&l…
阅读更多...
快乐学Python，如何正确使用pandas处理时间类型的数据？

快乐学Python，如何正确使用pandas处理时间类型的数据？

在日常的数据分析工作中&#xff0c;常常会有根据日期来对数据进行分析。比如我们需要通过用户的下单时间来分析用户在不同时间段对商品的喜好&#xff1b;如通过访问日志的访问时间来分析系统的访问周期和负载&#xff0c;为不同时间段的资源调配提供依据&#xff1b;如通过用…
阅读更多...
vit细粒度图像分类（六）TransFC学习笔记

vit细粒度图像分类（六）TransFC学习笔记

1.摘要 从判别局部区域学习特征表示在细粒度视觉分类中起着关键作用。利用注意机制提取零件特征已成为一种趋势。然而&#xff0c;这些方法有两个主要的局限性:第一&#xff0c;它们往往只关注最突出的部分&#xff0c;而忽略了其他不明显但可区分的部分。其次&#xff0c;他们…
阅读更多...
2024不可不会的StableDiffusion之拼接各组件（五）

2024不可不会的StableDiffusion之拼接各组件（五）

1. 引言 在之前的文章中&#xff0c;我介绍了如何安装扩散器库diffuser用以生成 AI 图像和构成stable diffusion的各个关键组件&#xff0c;即 CLIP 文本编码器、VAE 和 U-Net。在这篇文章中&#xff0c;我们将尝试把这些关键组件放在一起&#xff0c;并详细展示生成图像的扩散…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023