【Vue渲染】 条件渲染 | v-if | v-show | 列表渲染 | v-for

目录

前言

v-if和v-show的区别和联系

v-show和v-if如何选择

条件渲染|v-if|v-show

v-if

[v-if v-else](#v-if v-else)

[v-if v-else-if v-else](#v-if v-else-if v-else)

template

v-show

列表渲染|v-for

v-for


前言

本文介绍Vue渲染,包含条件渲染v-if和v-show的区别和联系以及列表渲染v-for

v-if和v-show的区别和联系

面试高频题!!!

v-if和v-show都可以控制便签的显示与与隐藏

v-if是直接控制dom操作元素,true表示在dom上面渲染该元素,false表示不渲染

v-show是控制元素的css属性,display:none和display:block分别对应tfalse和true

v-show和v-if如何选择

v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要频繁切换,则使用 v-show 较好;如果在运行时绑定条件很少改变,则 v-if 会更合适

条件渲染|v-if|v-show

v-if

<标签 v-if="表达式"></标签>

表达式可以填,常量,js表达式,Vue实例管理的xx

javascript 复制代码
<div class="app">
        <h1>{{msg}}</h1>
        <input type="number" v-model="num">
        <div v-if="num>30">炎热</div>
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:"v-if条件渲染",
                num:''
            }
        })
    </script>

不渲染时

v-if v-else

javascript 复制代码
<div class="app">
        <h1>{{msg}}</h1>
        <input type="number" v-model="num">
        <div v-if="num>=20">炎热</div>
        
        <div v-else>寒冷</div>
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:"v-if条件渲染",
                num:''
            }
        })
    </script>

v-if v-else-if v-else

javascript 复制代码
<div class="app">
        <h1>{{msg}}</h1>
        <input type="number" v-model="num">
        <div v-if="num<=10">寒冷</div>
        <div v-else-if="num<=20">凉爽</div>
        <div v-else>炎热</div>
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:"v-if条件渲染",
                num:''
            }
        })
    </script>

注意,在v-if v-else 、v-if v-else-if v-else中间不能添加其他标签否则就会报错

template

如果同一条件下需要控制多个标签的显示与隐藏并且减少代码的重复,那就要引入template标签,该标签是无意义的,只起到占位作用

javascript 复制代码
<div class="app">
        <h1>{{msg}}</h1>
        <input type="number" v-model="num">
       <template v-if="num>10">
        <div>1</div>
        <div>2</div>
        <div>3</div>
       </template>
    </div>

满足条件渲染时

v-show

<标签 v-show="表达式"></标签>

javascript 复制代码
 <div class="app">
        <h1>{{msg}}</h1>
        <input type="number" v-model="num">
        <div v-show="num>10">凉爽</div>
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'v-show',
                num:''
            }
        })
    </script>

隐藏时

直接是操作标签的style display属性,用display:none来控制

列表渲染|v-for

v-for

语法格式

<标签 v-for="(每一项,索引) in 数组名">

直接使用插值语法就可以将数组中的每一项拿出来

javascript 复制代码
<div class="app">
        <div v-for="(item,index) in arr">
            {{index}}--{{item}}
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:"v-for列表渲染",
                arr:[1,2,3,4,5,6,7,8,9]
            }
        })
    </script>

数组中以对象形式

javascript 复制代码
<div class="app">
        <div v-for="(item,index) in arr">
           {{item.name}}--{{item.age}}
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:"v-for列表渲染",
                arr:[
                    {name:'zhangsan',age:20},
                    {name:'lisi',age:22},
                    {name:'王五',age:25},
                ]
            }
        })
    </script>
相关推荐
endingCode8 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
运维-大白同学36 分钟前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
I_Am_Me_2 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴2 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue