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>

页面效果:

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐