18 v-for中使用v-if结合template标签的使用

知其黑、受其白发布时间：2021-12-01 17:30:35 ，浏览量：0

[基础]v-for列表循环详细讲解-2

v-for循环数字
v-for中如何使用判断
template 标签的使用

v-for循环数字

v-for是可以用来循环数字的，比如你要循环1-99的数字，可以直接写成下面的样子。

{{count}},

这样就可以快速的循环出1-99的值在页面上。可以在浏览器中看一下这个效果。




    
    
    Document
    


    


const app=Vue.createApp({ 
    data(){
        return{
        }
    },
    methods:{
    },
    template:`{{count}}`
}) 
const vm=app.mount("#app")

在这里插入图片描述

v-for中如何使用判断

你看一下，上篇文章写的关于数组循环的小例子，现在的新需求有些变化，由于公司不想招初级前端工程师了，我们想刨除出去，只显示中级和高级。这时候你很可能把代码写成这个样子。


    
        [{{index}}]{{item}}

在浏览器中进行预览，你会发现初级的循环项，并没有消失。

这是为什么呢？因为v-for循环的优先级要高于v-if判断的优先级，所以判断失效。

正确的写法应该是在

外层独立出一个标签，在

上做循环。比如写成下面的代码。

template:`
            
                
                    [{{index}}]{{item}}
                
            
        `

在这里插入图片描述




    
    
    Document
    


    


const app=Vue.createApp({ 
    data(){
        return{
            listArray:['初级','中级','高级']
        }
    },
    methods:{
    },
    template:`
                
                    
                        [{{index}}]{{item}}
                    
                
            `
}) 
const vm=app.mount("#app")

这时候到浏览器中预览，初级项如愿以偿的消失了。

template 标签的使用

上面的结果完美吗？当你打开浏览器的控制台，看Elements选项卡时，你会发现DOM结构是有问题的，明明循环出两项，却有3个

，而且这种外层套用

里边使用

的形式，不符合HTML语法的基本结构。

在这里插入图片描述为了解决这个问题，Vue给我们提供了模版标签，也就是一个空的占位符，目的就是解决模板中为完成业务逻辑，而使用的无用html标签的现象。

现在可以把上面的代码写成这样。




    
    
    Document
    


    


const app=Vue.createApp({ 
    data(){
        return{
            listArray:['初级','中级','高级']
        }
    },
    methods:{
    },
    template:`
                
                
                    [{{index}}]{{item}}
                
                
            `
}) 
const vm=app.mount("#app")

在这里插入图片描述这时候再到浏览器看一下结果，这样就符合我们的期待的样子了。


    
    ...
    ...

到这也基本讲完了vue3中对于列表循环的基本操作和一些小坑，希望对大家有帮助。

为了方便大家学习，附上本文所有代码：





    
    
    Document
    



    


const app = Vue.createApp({
    data() { 
        return { 
            listArray: [
                '初级', 
                '中级', 
                '高级'
            ],
            listObject:{ 
                DogOne:'黑背', 
                DogTwo:'泰迪', 
                DogThree:'金毛' 
            }
        } 
    },
    methods:{
        handleChangeBtnClick(){
            this.listArray.push('willem')
        },
    },
    template: `
        
            
                    
                        [{{index}}]{{item}}
                    
            
        

        点我改变

        
            
                [{{index}}]{{value}}-{{key}}
            
        

        {{count}},
        `
})
const vm = app.mount("#app")

在这里插入图片描述

关注

打赏

1665558895

查看更多评论

18 v-for中使用v-if结合template标签的使用

最近更新

热门博客

[ 申请 ]友情链接：