前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >v-for与v-if

v-for与v-if

原创
作者头像
软件工程师Michael
发布2022-09-11 12:36:15
3970
发布2022-09-11 12:36:15
举报

tips:

  • Vue3中 v-if的优先级比v-for高,尽量不要同时使用
  • Vue3中的元素中可以直接添加事件
  • Vue3中,v-for循环绑定的数据发生改变,渲染也会及时改变

example:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3"></script>
    <title>Document</title>
</head>
<body>
    <div id="leo">
        <input type="button" value="go" @click="change"/>
        <div v-for="name of arr" :key="name.id" @click="go"> <!--元素中可以直接添加事件-->
            {{name.value}}{{name.id}}
        </div>
        <span v-for="s in string" :key="index">
            {{s}}
        </span>
        <br/>
        <span v-for="n in 10">
            {{n}}
        </span>
        <span v-for="m in 10" v-if="m==2?true:false">  <!--v-if的优先级要高于v-for-->
            {{m}}
        </span>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    "string":"hello",
                    "arr":[
                        {
                            "value":"leo",
                            "id":0
                        },
                        {
                            "value":"sky",
                            "id":1
                        },
                        {
                            "value":"blue",
                            "id":2
                        }


                    ]
                }
            },
            "methods":{
                change(){
                    this.arr.push({
                        "value":"busy",
                        "id":3
                    }),
                    this.string +="vue3"
                },
                go(){
                    alert(1)
                }
            }
        }).mount("#leo")
    </script>
    
</body>
</html>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档