【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>
相关推荐
有梦想的刺儿12 分钟前
webWorker基本用法
前端·javascript·vue.js
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx