Vue条件渲染及列表渲染

最新推荐文章于 2023-07-10 17:13:44 发布

遥岑.

最新推荐文章于 2023-07-10 17:13:44 发布

阅读量293

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_52942098/article/details/125661830

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

条件渲染

v-if

v-if用于条件性地渲染一块内容，在表达式返回true时被渲染。
v-else必须紧跟在v-if或者v-else-if后面，否则不会被识别。
不推荐v-if和v-for一起使用，v-for具有更改的优先级

<body>
    <div id="app">
        <p v-if="flag===5">想去海边</p>
        <p v-else-if="flag===3">人生浪费指南</p>
        <p v-else>你不想</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            flag:5
        }
    })
</script>

用key管理可复用的元素

Vue会尽可能高效渲染元素，通常会复用已有元素而不是从头开始渲染，但这样做不总符合实际需求，所以我们可以通过添加key唯一值来使元素独立不被复用。

<template v-if="loginType === 'username'">
  <!-- label元素依然会被高效复用，因为他们没有key -->
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show

根据条件展示元素的指令，不同的是v-show的元素始终会被渲染并保留在DOM中，他只是简单切换元素的CSS属性display。
v-show不支持<template>元素。

v-if和v-show区别

v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
v-if是惰性的，在初始渲染时条件为假则什么也不做，直到条件为真才会开始渲染条件块；v-show不管初始条件是什么，元素总会被渲染，并且只是简单地基于CSS进行切换
v-if有更高的切换开销，v-show有更高的渲染开销，如果需要频繁切换使用v-show，如果运行时条件很少改变使用v-if

列表渲染

v-for

我们可以用v-for指令基于一个数组渲染列表，v-for需要使用item in items形式的特殊语法，items是源数据数组，item是被迭代的数组元素的别名。

<body>
    <ul id="exam">
        <li v-for="item in items" :key="item.message">
            {{item.message}}
        </li>
    </ul>
</body>
<script>
    var vm = new Vue({
        el:'#exam',
        data:{
            items:[
                {message:'F'},
                {message:'B'}
            ]
        }
    })
</script>

v-for中，我们可以访问所有父作用域的属性。

<body>
    <ul id="exam">
        <li v-for="(item,index) in items" :key="item.message">
            {{parent}}-{{index}}-{{item.message}}
        </li>
    </ul>
</body>
<script>
    var vm = new Vue({
        el:'#exam',
        data:{
            parent:'P',
            items:[
                {message:'F'},
                {message:'B'}
            ]
        }
    })
</script>

也可以用of作为分隔符。
也可以用v-for遍历一个对象的属性。

<body>
    <ul id="app" class="demo">
        <li v-for="value in obj">
            {{value}}
        </li>
    </ul>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            obj:{
                title:'list',
                author:'yc',
                publish:'2022'
            }
        }
    })
</script>

它也有别的参数。

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

//name键名,index索引

v-for也可以接受整数，在这种情况下，它会把模板重复对应次数。

<div>
   <span v-for='n in 10'></span>
</div>

当处于同一节点，v-for的优先级比v-if高，也就是说v-if将分别重复运行于每个v-for循环中，可以用于部分渲染。
如果想要有条件的跳过循环的执行，可以将v-if置于外层。

<li v-for='todo in todos' v-if='!todo.isComplete'>
   {{todo}}
</li>

维护状态

Vue正在更新使用v-for渲染的元素列表时，默认就地更新，如果数据项的顺序被改变，Vue不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素。这个模式适用于不依赖子组件状态或临时DOM状态。
为了跟踪每个节点，重用和重新排序现有元素，需要一个唯一的key属性。

<div v-for='item in items' v-bind:key='item.id'>{{内容}</div>

数组更新检测

Vue将侦听的数组变更进行包裹，他们也会触发视图更新，比如push()、pop()等。
非变更方法比如filter()、concat()和slice()，它们不会变更原始数组，而是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组。

vm.items = vm.items.filter(function(item){return item.message.match(/F/)})

遥岑.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue条件渲染及列表渲染

Vue条件渲染及列表渲染
复制链接

扫一扫

专栏目录