vue学习——v-for语句

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue v-for语句

在学习v-for语句之前，先了解一下vue是怎么数据绑定的

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

v-for把一个数组对应为一组元素

如上文那样的搭建vue环境后.

v-for语法法

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。当然你也可以用你喜欢的别名。如：

<div >
        <ul>
            <li v-for="string in aString">{{string}}</li>
        </ul>
    </div>

在data数据属性中，写上一个素组的信息：

// 简单学习vue v-for迭代
        var app = new Vue({
            el: '#app',
            data: {
                aString:['我','是','数','组']
        })

结果：

  • 我

  • 是

  • 数

  • 组

一个对象的 v-for

<ul>
    <li>{{objInArr}}</li>
    <li v-for="obj in objInArr">{{obj.name}} : {{obj.sex}}</li>
</ul>

var app = new Vue({
            el: '#app',
            data: {
               objInArr: [
                    {
                    name: "我是数组里面的对象1",
                    sex: "gay"
                    },
                    {
                    name: "我是数组里面的对象2",
                    sex: "gay"
                    },
                    {
                    name: "我是数组里面的对象3",
                    sex: "gay"
                    },
                ],
            }
        })

结果：

你甚至可以在操作对象时使用另外两个参数(一定得是对象):
(value, key, index) in object

<ul>
     <li>key和index演示</li>
     <li v-for="(value, key, index) in student"> {{index}}.{{key}}:{{value}} </li>
</ul>

var app = new Vue({
            el: '#app',
            data: {
 			student: {
                        name: "这里是对象",
                        sex: "gay",
                        num: 233
                    },
                  }
         })

结果：

END

完整demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>v-for</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div >
        <ul>
            <li v-for="string in aString">{{string}}</li>
        </ul>
        <ul>
            <li>{{objInArr}}</li>
            <li v-for="obj in objInArr">{{obj.name}} : {{obj.sex}}</li>
        </ul>
        <ul>
            <li>key和index演示</li>
            <li v-for="(value, key, index) in student"> {{index}}.{{key}}:{{value}} </li>
        </ul>
        <div v-for="(value, key, index) in object">
                {{ index }}. {{ key }}: {{ value }}
              </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script>
        // 简单学习vue v-for迭代
        var app = new Vue({
            el: '#app',
            data: {
                aString:['我','是','数','组'],
                objInArr: [
                    {
                    name: "我是数组里面的对象1",
                    sex: "gay"
                    },
                    {
                    name: "我是数组里面的对象2",
                    sex: "gay"
                    },
                    {
                    name: "我是数组里面的对象3",
                    sex: "gay"
                    },
                ],
                student: {
                        name: "这里是对象",
                        sex: "gay",
                        num: 233
                    },
            }
        })
    </script>
</body>
</html>

以上是 vue学习——v-for语句 的全部内容， 来源链接： utcz.com/z/377016.html

回到顶部