Vue 列表渲染

最新推荐文章于 2023-06-10 23:28:04 发布
最新推荐文章于 2023-06-10 23:28:04 发布
阅读量434 收藏
点赞数
文章标签： windows vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46610815/article/details/121371893
版权

列表渲染

<!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>
</head>


<body>
    <div id="root">
        <!-- 遍历数组 -->
        <ul >
            <li v-for="person in persons" :key="person.id">{{person.name}}---{{person.age}}</li>
        </ul>

          
        <!-- 遍历对象 -->
        <ul>
            <li v-for="(value,key,index) of car" :key="index">{{key}}--{{value}}--{{index}}</li>
        </ul>

        
        <!-- 遍历字符串 -->
        <ul>
            <li  v-for="(value,key) in characte" :key="key">
                    {{key}}--{{value}}  
            </li>
        </ul>

     
        <!-- 遍历指定次数 -->
     
          <ul>
            <li  v-for="(value,index) in 5" :key="index">
                    {{index}}--{{value}}  
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  new Vue({
      el:"#root",
      data: {
        persons:[
          {id:001,name:"张三",age:18},
          {id:002,name:"李四",age:19},
          {id:003,name:"王五",age:20}
      ],
      car:{
          name:"bmw",
          price:"70w",
          color:"black"
      },
      characte:"hello world"
      },
      
  })
</script>
</html>

index作为key值问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p4FjPuXs-1637115080287)(Vue 列表渲染.assets/image-20211116234121103-16370772839511-16370772878862-16370772928923.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dGW8By7G-1637115080289)(Vue 列表渲染.assets/image-20211116234224006-16370773451444.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mZmsg3G1-1637115080291)(Vue 列表渲染.assets/image-20211116234258302-16370773792875.png)]

vue没有写key，默认将index设为key

关于key的理解

<!-- 
    面试题:react、vue中的key有什么作用?(key的内部原理)
1.虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
    若虚拟DOM中内容没变，直接使用之前的真实DOM!
    若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2)旧虚拟DOM中未找到与新虚拟DOM相同的key
    创建新的真实DOM，随后渲染到到页面。
3.用index作为key可能会引发的问题:
   (1) 若对数据进行:逆序添加、逆序删除等破坏顺序操作:
    (2)会产生没有必要的真实DOM更新 => 界面效果没问题，但效率低。
    (3)如果结构中还包含输入类的DOM:
会产生错误DOM更新 => 界面有问题。
4、开发中如何选择key?:
    (1)最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
    (2)如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
 -->
<!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>
</head>


<body>
    <div id="root">
        <!-- 遍历数组 -->
        <ul >
            <li v-for="person in persons" :key="person.id">
                {{person.name}}---{{person.age}} 
                <input type="text">
            </li>
        </ul>

        <button  @click.once="addname">add</button>
      
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  new Vue({
      el:"#root",
      data: {
        persons:[
          {id:001,name:"张三",age:18},
          {id:002,name:"李四",age:19},
          {id:003,name:"王五",age:20}
      ]
      },
      methods: {
          addname(){
              const p={id:004,name:"老刘",age:40};
              this.persons.unshift(p);
          }
      },
  })
</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>
</head> 


<body>

    <div id="root">
        <input type="text" placeholder="please enter the name" v-model="keyword">
        <!-- 使用监视属性 -->
        <ul >
            <li v-for="person in filterpersons" :key="person.id">{{person.name}}---{{person.age}}---{{person.sex}}</li>
        </ul>
 
      
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
 const vm= 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:"女"},
        ],
        filpersons:[]
      },    
    //   监视属性
      watch:{
          keyword:{
             immediate:true,
             handler(val){
                return this.filpersons=this.persons.filter((p)=>{
                  return p.name.indexOf(this.keyword)!==-1})
                }
          }
      },
    //   计算属性
    computed:{
        filterpersons(){
           return 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>
</head> 


<body>

    <div id="root">
        <input type="text" placeholder="please enter the name" v-model="keyword">
        <!-- 使用监视属性 -->
        <ul >
            <li v-for="person in filterpersons" :key="person.id">{{person.name}}---{{person.age}}---{{person.sex}}</li>
        </ul>
 
      
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
 const vm= 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:"女"},
        ],
        filpersons:[]
      },    
    //   监视属性
      watch:{
          keyword:{
             immediate:true,
             handler(val){
                return this.filpersons=this.persons.filter((p)=>{
                  return p.name.indexOf(this.keyword)!==-1})
                }
          }
      },
    //   计算属性
    computed:{
        filterpersons(){
           return this.persons.filter((p)=>{
                  return p.name.indexOf(this.keyword)!==-1;})
            }
        }
    
  })
</script>
</html>
伴着日落黄昏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue入门-列表渲染
压缩疯雷的博客
10-19 735
列表渲染用 v-for 把一个数组对应为一组元素在 v-for 里使用对象维护状态数组更新检测替换数组注意事项显示过滤/排序后的结果在 v-for 里使用值范围在 上使用 v-for在组件上使用 v-for 用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 <ul id="example-1"> &
Vue之列表渲染
一叶之秋的博客
12-15 445
6、列表渲染 v-for：列表循环指令 例1：简单的列表渲染 <!-- 1、简单的列表渲染 --> <ul> <li v-for="n in 10">{{ n }} </li> </ul> <ul> <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 --> <li v-for="(n, index) in 5">{{ n }} - {{ index
vue2x key的原理
weixin_45802907的博客
11-16 90
key的原理 虚拟DOM中key的原理 key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下 对比原则 旧虚拟DOM中找到了与新虚拟DOM相同的key： .若虚拟DOM中内容没变, 直接使用之前的真实DOM！ .若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。
[Vue]列表渲染
emmmm.....
10-09 2492
1. 列表渲染 1.1 v-for 1.2 v-for 中的索引 2. v-for 遍历数组 3. v-for 遍历对象 4. v-for 遍历字符串 5. v-for 遍历指定次数 6. key的作用与原理 6.1 key 6.2 key错误演示 6.2.1 index作为key 6.2.2 不写key 6.2.3 出现错误的解释 6.3 可以对数组数据进行唯一标识的作为key 6.3.1 示例 6.3.2 解释 6.4 key的作用 6.5 用index作为key可能会引发的问题 6.6 开发中如何选择
vue列表渲染
2018.
05-06 636
vue列表渲染注意事项1 对象2 数组API3 数组响应式4 对象响应式5 过滤、排序 v-for更新渲染过的元素列表，默认使用复用策略，这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出 1 对象 迭代对象属性有三个参数，value, name, index 2 数组API 使用数组的变异方法改变数组触发视图更新； 使用非变异方法返回一...
Vue列表渲染的示例代码
12-29
我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的语法： {{ item.message }} var vm = new Vue({ el: '#el', data: { items: [ {message: 'foo'}, {message: '...
Vue列表页渲染优化详解
01-21
vue列表页渲染优化，具体内容如下 想法 初始化时，vue会对data做getter、setter改造，在现代浏览器里，虽然JS已经足够快，但仍然有优化空间。 列表页的数据结构为： list: [ // 每一项有不同的来源，不同来源的...
详解key在Vue列表渲染时究竟起到了什么作用
10-17
主要介绍了key在Vue列表渲染时究竟起到了什么作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue列表渲染
HeX_7的博客
05-05 1402
基本列表、key原理、列表过滤、列表排序、Vue检测数据改变原理
Vue-列表渲染
weixin_45497246的博客
05-05 227
目录1.Vue怎么渲染一个列表？2.维护状态：key3.数组更新4.显示过滤/排序后的结果5.在 v-for 里使用值范围6.在 template标签上使用 v-for7.在组件上使用 v-for 1.Vue怎么渲染一个列表？ 基于数组使用v-for 指令 v-for 指令需要使用 item in items 语法，不过我们更推荐使用of代替in，因为这样更接近js迭代器的语法。其中 items...
Vue的列表渲染
Flora's Zone
04-28 1026
Vue的列表渲染
Vue 中的列表渲染
最新发布
IT徐师兄
06-10 2082
在 Vue 中，列表渲染是非常常见的操作。它允许我们将一个数组中的数据渲染为一个列表，从而实现数据的展示和交互。在本文中，我们将探讨 Vue 中的列表渲染的基本原理和用法，并给出一些实例代码来帮助读者更好地理解。
vue 列表渲染
李特成的博客
07-17 110
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;列表渲染&lt;/title&gt; &lt;/head&gt; &lt;body&gt;

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值