Vue基础（2）——v-for，v-if 语法

青旅半醒 2022-11-12 11:55 105阅读 0赞

> **v-for即for循环**
> 
>  *  如果遍历的对象是数组，表达式的格式为：（T，index） in List<T>，其中T是对象类型；如果遍历的目标是对象，表达式的格式为：（v,k,i）in T ,其中v是键的值，k是键，i是索引，T是对象
> 
> **v-if表示判断**
> 
>  *  当表达式为true是展示标签内容，false时不展示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTY5MTgz_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script src="./_vue@2.6.12@vue/dist/vue.js"></script>
        <div id="app">
            <ul>
                <li v-for="(people,index) in peopleArry">
                    index:{
       {index}},name={
       {people.name}},age={
       {people.age}}<br>
                    对象键值对:
                    <span v-for="(v,k) in people">
                        {
       {k}}={
       {v}}
                    </span>
                </li>
                <li v-for="num in numArry">
                    <span v-if="num%2==0">
                        偶数:{
       {num}}
                    </span>
                    <span v-if="num%2==1">
                        奇数:{
       {num}}
                    </span>
                </li>
            </ul>
        </div>
    
        <script>
    
            let app = new Vue({
                el: '#app',
                data: {
                    peopleArry: [{ name: 'a', age: 1 }, { name: 'b', age: 2 }, { name: 'c', age: 3 }],
                    numArry: [1, 2, 3, 4, 5, 6]
                }
            })
        </script>
    
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTY5MTgz_size_16_color_FFFFFF_t_70]: /images/20221022/b70d638325ae47ebad31efed2c2fac3a.png