vue中的if判断和for循环语句

刺骨的言语ヽ痛彻心扉 2022-12-14 12:27 104阅读 0赞

## if语句 ##

<div class="vm">
    	   <div v-if="type==='A'">
                A
            </div>
            
            <div v-else-if="type==='B'">
                B
            </div>
            
            <div v-else-if="type==='C'">
                C
            </div>
            
            <div v-else>
                error 
            </div>
    </div>
    script type="text/javascript">
            var vm = new Vue({ 
                el:'.vm',
                data:{           
                    type:'', //为空时页面显示error
                    type:'A', //为空时页面显示A
                    type:'B', //为空时页面显示B
                    type:'C', //为空时页面显示C
                    
            })
    </script>

## for语句 ##

<div class="vm">
    		//for循环数组
    		 <ul>
                <li v-for='item,index in items'>
                    { { index}}===={ { item.msg}}
                </li>
            </ul>
    
    		//for循环对象
            <ul>
                <li v-for='value,key in object'>
                    { { key}}===={ { value}}
                </li>
            </ul>
    </div>
    <script type="text/javascript">
            var vm = new Vue({ 
                el:'.vm',
                data:{ 
                    items:[
                        { msg:'aaaa'},
                        { msg:'bbbb'},
                    ],
                    object:{ 
                        name:'zhangsan',
                        age:'30',
                    }
                },      
            })
    </script>

#### 页面效果： ####

![在这里插入图片描述][2020101318002599.png_pic_center]

[2020101318002599.png_pic_center]: /images/20221123/7bf49c8ff00545a0b27d1d78f8ea3ec2.png