zoukankan      html  css  js  c++  java
  • vue学习——v-for语句

    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>
    
  • 相关阅读:
    poj 2754 Similarity of necklaces 2 转换成多重背包,单调队列优化/ 二进制优化
    new和delete2
    new和delete1
    new和delete4
    new和delete3
    new(placement new)
    用例图中的Actor(参与者)一定是人吗?
    二维数组的函数参数传递
    二维指针动态创建二维数组(C/C++)
    OOD的五项基本原则——SOLID
  • 原文地址:https://www.cnblogs.com/famine/p/9795675.html
Copyright © 2011-2022 走看看