vue学习——v-for语句

Vue v-for语句在学习v-for语句之前，先了解一下vue是怎么数据绑定的数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：&lt;span&gt;Message: {{ msg }}&lt;/span&gt;Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对

人生莫如饥荒

23416人浏览 · 2018-10-16 00:05:11

人生莫如饥荒 · 2018-10-16 00:05:11 发布

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 id="app">
        <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"
                    },
                ],
                
            }
            
        })

结果：
v-for

你甚至可以在操作对象时使用另外两个参数(一定得是对象):
(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
                    },
                  }
         })

结果：
v-for value key index

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 id="app">
        <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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^