Vue-06-模板渲染_vue v-ele-CSDN博客

本文链接：https://blog.csdn.net/weixin_46147113/article/details/123834454

本文深入探讨了Vue.js中的模板渲染，包括条件渲染的v-if、v-else-if、v-else和v-show的区别，强调了它们在性能和场景应用上的差异。此外，还详细介绍了列表渲染的v-for循环，以及如何使用key属性避免元素复用问题。

摘要由CSDN通过智能技术生成

一、条件渲染

1、v-if、v-elese-if、v-else

注意：需要使用多个v-if、v-elese-if、v-else之间需要紧挨着，如果在他们之间插入一行新代码则编译浏览器会报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="stats==1">当stats为1时，显示该行</p>
    <p v-else-if="stats == 2">当stats为2时，显示该行</p>
    <p v-else-if="stats == 3">当stats为3时，显示该行</p>
    <p v-else>否则显示该行</p>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            stats:2
        }
    })
</script>
</body>
</html>

运行结果

2、v-show

实际上同v-if效果等同，当绑定事件的元素符合引号中的条件时，该元素才显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-show="status==1">当status为1时显示改行</p>
    <p v-show="status==2">当status为2时显示改行</p>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            status:2
        }
    })
</script>
</body>
</html>

运行结果

3、v-if和v-show的区别

①、控制显示的方法不同：v-show实际通过修改DOM的display属性来实现节点的隐藏和显示。而v-if则是通过添加和删除DOM节点来实现。

②、编译条件：v-if是惰性的，如果初始条件为假，则什么也不做，此时不会去渲染该元素，只有在条件第一次为真的时候才开始局部编译；v-show则是不管初始条件是什么，都会被编译，然后被缓存，而且DOM元素保留，只是简单的基于CSS进行切换，即v-if为true时才会被加载渲染，而为false时不加载。v-show不管为true和false，都会被加载渲染

③、性能消耗：v-if有更高的切换消耗，而v-show有更高的的初始消耗

④、使用场景：如果需要频繁的切换，则使用v-show的效果更好，如果在运行时条件很少改变则，只需一次显示或隐藏，则使用v-if效果更好

4、key

Vue会尽可能高效的渲染元素，通常会复用已有䛾而不是从头开始渲染

Vue提供了一种方式来声明这两个元素是独立的，不要复用他们，只需要添加一个具有唯一值的key属性，如果不填家key属性发现切换后文本框的内容还在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="ok">
        <lebel>Username</lebel>
<!--     如果不加key元素  切换按钮之后文本框内的内容没有清空，因此用key声明两个元素完全独立，不再复用他们   -->
        <input placeholder="请输入你的名字" key="username">
    </p>
    <p v-else>
        <lebel>Email</lebel>
        <input placeholder="请输入你的邮箱" key="email">
    </p>
    <button @click="ok=!ok">切换</button>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            ok:true
        }
    })
</script>
</body>
</html>

运行结果

二、列表渲染

1、v-for循环

v-for支持可选的第2个参数为当前项的索引，索引从0开始，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<ul id="app">
    <li v-for="item in items">{{item.name}}</li>
    <li v-for="(item,index) in items">{{index}}--{{item.name}}</li>
</ul>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            items:[
                {name:'张三'},
                {name:'李四'}
            ]
        }
    })
</script>
</body>
</html>

运行结果