分享

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

 中间件 2022-07-01 发布于浙江

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>

页面效果:

在这里插入图片描述

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多