vue v-for访问父作用域数据

在 v-for 块中,我们拥有对父作用域属性的完全访问权限。

在 v-for 块中,我们拥有对父作用域属性的完全访问权限。实例如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>学习 VUE 框架</title>
    <!-- 这里你可以使用 CDN 引入 vue库 -->
    <script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<ul id="example-2">
    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
</ul>
<script type="text/javascript">
    var example2 = new Vue({
        el: '#example-2',
        data: {
            parentMessage: 'Parent',
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })
</script>
</body>
</html>

输出:

<ul id="example-2">
    <li>Parent - 0 - Foo</li>
    <li>Parent - 1 - Bar</li>
</ul>
谁不会休息,谁就不会工作。 —— 列宁
1 不喜欢
说说我的看法 -
全部评论(
没有评论
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
公众号