vue中v-for指令的使用

最新推荐文章于 2023-07-08 20:45:38 发布

程序员-小李

最新推荐文章于 2023-07-08 20:45:38 发布

阅读量1.1k

点赞数 1

分类专栏： # Vue 文章标签： spring boot java 后端

本文链接：https://blog.csdn.net/weixin_44107140/article/details/121390721

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文就Vue中列表渲染做个简单总结和使用演示:

列表渲染是用v-for指令根据绑定一组元素的选项来完成的，渲染格式可以自定义。

列表遍历

最基本的使用案例1：

<!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>列表渲染</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(name,index) in names">
                {{index}}-{{name}}
            </li>
        </ul>
    </div>  
</body>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                names:['张三','李四','王五','赵六']
            }
        },
    })
</script>
</html>

上面的例子中，通过v-for指令，绑定data中的names数组,以列表的形式遍历出数组中的元素，其中name代表当前数组的一个遍历元素，index是当前元素name在数组中的索引，输出效果如下：

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>列表渲染</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 遍历对象 -->
        <ul>
            <li v-for="(propery,key) in student">
                {{key}}:{{propery}}
            </li>
        </ul>
        <!-- 遍历字符串 -->
        <ol>
            <li v-for="char in str">{{char}}</li>
        </ol>

        <!-- 自定义输出 -->
        <ul>
            <li v-for="num in 10">
                {{num}}
            </li>
        </ul>
    </div>  
</body>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                student:{
                    name:'李明',
                    age:23,
                    address:'大连'
                },
                str:'HelloWord'
            }
        },
    })
</script>
</html>

上面代码的效果如下：

Vue中key的作用：

作用
key是虚拟dom对象的标识，当数据发生变化时，vue会根据【新数据】生成【新的虚拟dom】，随后Vue进行【新虚拟dom】和【旧虚拟dom】的差异对比

差异对比规则：
先是在【旧虚拟dom】中找到与【新虚拟dom】相同的key
若虚拟dom中的内容没变，直接使用之前的真实dom
若虚拟dom中的内容边了，则生成新的真实dom,随后替换掉页面中之前的真实dom

若在【旧虚拟dom】中没有找到和【新虚拟dom】相同的key,就创建新的真实dom,随后渲染到页面中

列表过滤

列表过滤即在进行列表遍历前对列表元素进行一次筛选，选择出符合要求元素进行展示，如：

假如我们要过滤掉列表里名为‘张三’的人：(可以用computer或者watch这两个属性实现)

<!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>列表渲染</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 列表过滤 -->
        <!-- computer方式 -->
        <ul>
            <li v-for="(name,intdex) in showNames">{{name}}</li>
        </ul>

        <!-- watch方式 -->
        <ol>
            <li v-for="(name,index) in displayName">{{name}}</li>
        </ol>
    </div>  
</body>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                names:['张三','李四','王五','赵六'],
                displayName:[],
            }
        },
        watch: {
            name:{
                immediate:true,
                handler(val){
                    this.displayName=this.names.filter((n)=>{
                        return n!='张三'
                    })
                }
            }
        },
        computed: {
            // 假如我们要过滤掉名为'张三'的人
            showNames(){
                return this.names.filter((n)=>{
                    return n!="张三"
                })
            }
        },
        
    })
</script>
</html>

效果：

程序员-小李

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中v-for指令的使用

本文就Vue中列表渲染做个简单总结和使用演示:列表渲染是用v-for指令根据绑定一组元素的选项来完成的，渲染格式可以自定义。列表遍历最基本的使用案例1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
复制链接

扫一扫