12_列表渲染

最新推荐文章于 2023-07-21 20:23:18 发布
最新推荐文章于 2023-07-21 20:23:18 发布
阅读量299 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xixihaha_coder/article/details/123175810
版权

12_列表渲染

v-for

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>人员列表</h2>
      <!-- 遍历数组 -->
      <ul>
        <li v-for="(p,index) in persons" :key="p.id">{{p.name}}-{{p.age}}</li>
      </ul>

      <!-- 遍历对象 -->
      <h2>汽车信息</h2>
      <ul>
        <li v-for="(value,key) of car" :key="key">{{key}}-{{value}}</li>
      </ul>
      <!--遍历字符串  -->
      <h2>遍历字符串</h2>
      <ul>
        <li v-for="(char,index) of str">{{char}}-{{index}}</li>
      </ul>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
      el: "#root",
      data: {
        persons: [
          { id: "001", name: "张三", age: 18 },
          { id: "002", name: "李四", age: 19 },
          { id: "003", name: "王五", age: 20 },
        ],
        car: {
          name: "奥迪",
          price: "70万",
          color: "黑色",
        },
        str: "hello",
      },
    });
  </script>
</html>

: key

开发中如何选择key? :

1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

3.不写: key 默认是index(下标)

列表过滤

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord" />
      <ul>
        <li v-for="(p,index) in filePersons" :key="p.id">
          {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
      </ul>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;
//用watch实现
//#region
  /*  new Vue({
      el: "#root",
      data: {
        keyWord: "",
        persons: [
          { id: "001", name: "马冬梅", age: 18, sex: "女" },
          { id: "002", name: "周冬雨", age: 19, sex: "女" },
          { id: "003", name: "周杰伦", age: 20, sex: "男" },
          { id: "004", name: "温兆伦", age: 21, sex: "男" },
        ],
        filePersons: [],
      },
      watch: {
        keyWord: {
          immediate: true, //刚开始就先执行一遍
          handler(val) {
            this.filePersons = this.persons.filter((p) => {
              return p.name.indexOf(val) !== -1;
            });
          },
        },
      },
    });*/
    //#endregion
//用computed实现
    new Vue({
      el: "#root",
      data: {
        keyWord: "",
        persons: [
          { id: "001", name: "马冬梅", age: 18, sex: "女" },
          { id: "002", name: "周冬雨", age: 19, sex: "女" },
          { id: "003", name: "周杰伦", age: 20, sex: "男" },
          { id: "004", name: "温兆伦", age: 21, sex: "男" },
        ],
      },
     computed:{
         filePersons(){
          return  this.filePersons = this.persons.filter((p) => {
              return p.name.indexOf(this.keyWord) !== -1;
            });
         }
     }
    });
  </script>
</html>

列表排序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord" />
      <button @click="sortType=2">年龄升序</button>
      <button @click="sortType=1">年龄降序</button>
      <button @click="sortType=0">原顺序</button>

      <ul>
        <li v-for="(p,index) in filePersons" :key="p.id">
          {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
      </ul>
    </div>
  </body>

  <script type="text/javascript">
        Vue.config.productionTip = false;

    //用computed实现
        new Vue({
          el: "#root",
          data: {
            keyWord: '',
            sortType:0,//0原顺序 1降序 2升序
            persons: [
              { id: "001", name: "马冬梅", age: 28, sex: "女" },
              { id: "002", name: "周冬雨", age: 19, sex: "女" },
              { id: "003", name: "周杰伦", age: 10, sex: "男" },
              { id: "004", name: "温兆伦", age: 21, sex: "男" },
            ]
          },
         computed:{
             filePersons(){
              const arr= this.persons.filter((p) => {
                  return p.name.indexOf(this.keyWord) !== -1;
                })
              //判断一下是否需要排序
              if(this.sortType){
                arr.sort((p1,p2)=>{
                  return this.sortType===1? p2.age-p1.age:p1.age-p2.age
                })
              }
              return arr;
            }
         }
        });
  </script>
</html>

vue.set的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>学生信息</h2>
      <h3>姓名: {{student.name}}</h3>  
      <button @click="addSex">添加一个性别属性，默认是男</button>
      <h3 v-if="student.sex">性别:{{student.sex}}</h3>
    </div>
  </body>

  <script type="text/javascript">
        Vue.config.productionTip = false;

    //用computed实现
        new Vue({
          el: "#root",
          data: {
            student:{
              name:'tom'
            },
          },
          methods:{
              addSex(){
                Vue.set(this.student,'sex','男')
              }
            }
            
        });
  </script>
</html>

小总结

1. vue会监视data中所有层次的数据。

2.如何监测对象中的数据?
通过setter实现监视,且要在new Vue时就传入要监测的数据。	(1).对象中后追加的属性,Vue默认不做响应式处理
	(2).如需给后添加的属性做响应式,请使用如下API:
vue.set(target. propertyName/index, value）或vm.$set(target. propertyName/index, value)

3，如何监测数组中的数据?
通过包裹数组更新元素的方法实现,本质就是做了两件事:
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法:
	1.使用这些API:plush()、 pop()、 shift()、unshift()、splice()、 sort()、 reverse()
	2.Vue.set()或vm.$set()

特别注意:Vue.set()和 vm.$set()不能给vm或 vm的根数据对象添加属性!!!

xixihaha_coder
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PathFinder:DirectX 12渲染器
04-03
渲染过程系统支持自动进行幕后资源状态跟踪和优化，资源存储器别名，管道状态管理，命令列表管理等，同时提供了一个简单的统一界面，使用户可以快速创建任意但高效的渲染管线原型而无需集中精力在低层管理上。...
数据渲染 DOM循环
Chico_Feng的博客
12-06 431
数据渲染 DOM循环
12.列表渲染
ma628991的博客
11-22 462
12.列表渲染
动态渲染表格、事件上、事件下、轮播图
最新发布
linjun的博客
07-21 181
【代码】动态渲染表格、事件上、事件下、轮播图。
动态渲染表格
tby_pr的博客
10-12 519
意义: 根据一个数据(数组 / 对象), 把页面的 html 结构完成 1. 获取元素 => tbody 标签: 因为最终组装完毕的内容需要填充到 tbody 标签内 2. 把 userList 数组转换成 html 格式的字符串 => 需要多少个 tr ? => 数组的 length 是多少, 就是多少个 tr => 遍历 数组, 生成 tr => 每一个 tr...
Vue.js教程视频（10）.第9节 列表渲染.mp4
06-19
Vue.js教程视频系统，共16个视频，内容如下： 01.序言 vue.js介绍 ...10.第9节 列表渲染 11.第10节 事件绑定 12.第11节 表单输入绑定 13.第12节 组件基础 14.第13节 组件注册 15.第14节 单文件组件
D3D12Renderer
04-01
该项目使用Direct3D 12在C ++中从头开始实现一个自定义渲染引擎。它支持一些“新”功能，例如光线跟踪，网格着色器等。 不完整的功能列表（许多工作正在进行中） 正向渲染 基于物理的渲染 动态灯光和动态阴影 太阳...
OpenSceneGraph三维渲染引擎编程指南.pdf
05-29
1.3.3 OSG邮件列表 13 1.4 OSG基础 14 1.4.1 开发环境设置 14 1.4.2 OSG中的HelloWorld工程 14 1.4.3 OSG实用工具——场景浏览器osgViewer 17 1.4.4 OSG实用工具——版本信息查看器 osgVersion 21 1.4.5 OSG...
xtwelve:Haskell中的ANSI X12 EDI分析器和渲染器
05-21
Haskell库，用于解析和呈现ANSI X12 EDI（电子数据交换），这是一种遗留消息格式，仍然在医疗保健和物流等行业中普遍使用。 这在非常早期的发展中。 当前，它可以将消息读入段和元素的列表中，仅此而已。
07-利用循环实现列表的渲染.html
09-03
07-利用循环实现列表的渲染
11-21表格渲染.html
11-22
利用html，css，js制作修改的动态表格渲染，包括添加删除和选中，希望能帮助到和我一样的新手，生活不易，互相帮助，多点关心多点爱
动态列表HTML跨行表格（动态渲染数据，JS计算跨行）
q893332169的博客
05-30 4745
注 : 使用的是静态HTML，只是为了偷个懒，和页面模板渲染效果一样。本文章会不定期更新，如果有什么疑问，可以在下面提出来。如果本篇对你有所帮助，希望可以给个赞。 1. 准备工作 有序的数据 比如下面这些数据： 2.页面展示 上面的数据会展示成如下效果： 3. 页面代码 原理： 1. 首先先确定要比较什么，比如我们第一次比较的是地区列，这里肯定是用的for循环和冒泡...
HTML网页表格的制作与渲染
girls的博客
10-14 1119
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单元格</title> <style> table{
html动态表格用数组填充,动态添加表格列，而且进行数据渲染
weixin_39664136的博客
06-07 1202
在element ui中提供了表格的基本操做，如今须要 根据查询条件月份范围 来展现表格的列。处理方式以下：htmlhtml文件：后端{{itemDes.orderNum}}{{itemDes.orderPrice}}{{scope.row.orderNum1}}{{scope.row.orderPrice1}}先后都是固定的展现，中间展现月份数据时，根据查询月份的范围展现，默认展现7个月份的数据...
html商品列表数据渲染,性能优化小册 - 渲染十万条数据：基于 IntersectionObserver 的虚拟列表...
weixin_31174671的博客
06-04 566
技术不局限于框架，相同的原理只是实现方式略有不同。前置1. 什么是虚拟列表？首先，虚拟列表只是一个概念，本人对虚拟列表这个表述不置可否。虚拟列表是对于列表形态数据展示的一种按需渲染，是对长列表渲染的一种优化。虚拟列表不会一次性完整地渲染长列表，而是按需显示的一种方案，以提高无限滚动的性能。2. 虚拟列表的实现原理？根据容器元素的高度 clientHeight 以及列表项元素的高度 offsetHe...
html如何实现多级列表,渲染多级html列表的算法
weixin_30249997的博客
06-11 322
找到算法here。我的类看起来是这样的：public class LiItem{public int Id { get; set; }public int? ParentId { get; set; }public string Text { get; set; }public bool IsRendered { get; set; }}public class TreeViewRenderer{...
列表渲染
Leon_Jinhai_Sun的博客
12-10 193
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染</title> </head> <body> <div id="app"></div> <script s...
知识点6--条件渲染与列表渲染
别人笑我太疯癫，我笑他人看不穿。
07-07 586
条件渲染其实就是前端的条件判断，早先的jsp标签库提供过if的标签，vue也同样有这样的功能，不同的是，vue是使用模板指令完成的 效果如下 在前端指的是，是地址对比，是赋值，不要再这一点上疑惑，vue它本身也是原生js封装来的，jquery能用的东西vue一般也是通用的，不要以为vue超然世外了除了if渲染之外，条件渲染还提供了渲染，它的作用是直接决定一个标签元素是否被展示，这一点可以直接实现，不过这里还是说一下大家要知道有这么一个模板指令是专门用来完成是否渲染的 效果如下 这里说一下在是否渲染上用和
d3d12超大图片渲染
06-08
其中，m_frameIndex为当前帧的索引，commandList为渲染命令列表，需要在每个小纹理的渲染之前将渲染目标视图和清除颜色设置为当前纹理对应的视图和颜色。 4. 将渲染目标内容拷贝到CPU可访问的纹理中，可以使用如下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值