Day_04 Vue学习

最新推荐文章于 2024-08-10 18:26:28 发布

龍妞馨宁

最新推荐文章于 2024-08-10 18:26:28 发布

阅读量97

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43209850/article/details/122574392

版权

Day_04 Vue学习

1、列表渲染

v-for指令：
1.用于展示列表数据
2.语法：v-for="(item, index) in xxx" (:key=“yyy”)
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<body>
    <div id="root">
        <h2>人员列表（遍历数组）</h2>
        <ul>
            <!-- key不能重复 key可以用index，in可以替换为of-->
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}-----{{index}}
            </li>
        </ul>
        <h2>汽车信息（遍历对象）</h2>
        <ul>
            <li v-for="(value,k) of car" :key="k">
                {{k}}-{{value}}
            </li>
        </ul>
        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{index}}-{{char}}
            </li>
        </ul>
        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) of 5" :key="index">
                {{index}}-{{number}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                persons: [{id: '001',name: '张三',age: '18'},
                          {id: '002',name: '李四',age: '19'}, 
                          {id: '003',name: '王五',age: '20'}
                         ],
                car: {name: '奥迪A8',price: '70万',color: '黑色'},
                str: "123468gfds"
            }
        })
    </script>
</body>

key 就是一个唯一标识

2、react、Vue中的key是什么(内部原理）

虚拟dom中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
对比规则：
- 旧虚拟DOM中找到了与新虚拟DOM相同的key,若虚拟DOM中内容没变，直接使用之前的真实DOM！
- 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
- 旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的真实DOM，随后渲染到到页面。
用index作为key可能会引发的问题：
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作；会产生没有必要的真实DOM更新 ==》界面效果没问题，但效率低。
- 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。

<body>
    <div id="root">
        <h2>人员列表（遍历数组）</h2>
        <button @click.once='add'>添加一个老刘</button>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>

    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                persons: [{id: '001',name: '张三',age: '18'}, 
                          {id: '002',name: '李四',age: '19'}, 
                          {id: '003',name: '王五',age: '20'}
                         ]
            },
            methods: {
                add() {
                    const p = {
                        id: '004',
                        name: '老刘',
                        age: '40'
                    }
                 //向数组的最前面插入数据
                 this.persons.unshift(p)
                }
            }
        })
    </script>
</body>

开发中如何选择key?

最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

在这里插入图片描述

列表过滤

用计算属性和监视属性实现假的搜索功能，最优操作为计算属性

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入姓名" v-model='keyword'>
        <ul>
            <li v-for="(p,index) in filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        // 用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: '003',name: '温兆伦',age: '20',sex: '男'}
                         ],
                filPersons: []
            },
            //用监视属性实现搜索功能
            watch: {
                keyword: {
                    immediate: true,
                    handler(val) {
                        this.filPersons = this.persons.filter((p) => {
                            // 每个字符串中都包含''
                            return p.name.indexOf(val) !== -1;
                        })
                    }
                },
            }
        })*/
        //#endregion
        // 用计算属性实现
        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: '003',name: '温兆伦', age: '20',sex: '男'}
                         ],
            },
            computed: {
                filPersons() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyword) !== -1;
                    })
                }
            }
        })
    </script> 
</body>

列表排序

<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 filPersons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                sortType: 0, //0原顺序,1降序 2升序
                keyword: '',
                persons: [{id: '001',name: '马冬梅',age: '18',sex: '女'}, 
                          {id: '002',name: '周冬雨',age: '19',sex: '女'},
                          {id: '003',name: '周杰伦',age: '20',sex: '男'},
                          {id: '003',name: '温兆伦', age: '20',sex: '男'}
                         ],
            },
            computed: {
                filPersons() {
                    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>
</body>

列表更新时的一个问题

<body>
    <div id="root">
        <h2>人员列表</h2>
        <button @click="updateMei">更新马冬梅的信息</button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                persons: [{id: '001',name: '马冬梅',age: '18',sex: '女'}, 
                          {id: '002',name: '周冬雨',age: '19',sex: '女'},
                          {id: '003',name: '周杰伦',age: '20',sex: '男'},
                          {id: '003',name: '温兆伦', age: '20',sex: '男'}
                         ],
            },
            methods: {
                updateMei() {
                    // this.persons[0].name = "马什么梅" //奏效
                    // this.persons[0].age = "50" //奏效
                    this.persons[0] = {
                        id: '001',
                        name: "马什么梅",
                        age: 50
                    }
                }
            },
        })
    </script>
</body>

在这里插入图片描述

以上就是Vue他没有检查到值的变化

龍妞馨宁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day_04 Vue学习

Day_04 Vue学习1、列表渲染v-for指令：1.用于展示列表数据2.语法：v-for="(item, index) in xxx" (:key=“yyy”)3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）<body> <div id="root"> <h2>人员列表（遍历数组）</h2> <ul> <!-- key不能重复 key可以用ind
复制链接

扫一扫