Vue指令（2）：v-for、v-if与v-show

最新推荐文章于 2024-08-21 18:34:09 发布

?abc!

最新推荐文章于 2024-08-21 18:34:09 发布

阅读量396

点赞数 1

分类专栏：前端综合文章标签： vue.js r语言 javascript

本文链接：https://blog.csdn.net/yyuggjggg/article/details/120884295

版权

前端综合专栏收录该内容

50 篇文章 0 订阅

订阅专栏

v-for(遍历数据)

v-for：遍历数据渲染页面

遍历数组

语法：

v-for="item in items"

items：要遍历的数组，需要在vue的data中定义好。
item：循环变量

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <ul>
            <li v-for="user in users">
                {{user.name}}--{{user.age}}--{{user.gender}}
            </li>
        </ul>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{
            users:[
                {"name":"张三","age":8,"gender":"男"},
                {"name":"李四","age":12,"gender":"女"},
                {"name":"王五","age":4,"gender":"男"}
            ]
        }
    });
</script>
</body>
</html>

页面显示：

遍历角标

需要知道数组角标，可以指定第二个参数：

语法：

v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <ul>
            <li v-for="(user,index) in users">
                {{index}}----{{user.name}}--{{user.age}}--{{user.gender}}
            </li>
        </ul>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{
            users:[
                {"name":"张三","age":8,"gender":"男"},
                {"name":"李四","age":12,"gender":"女"},
                {"name":"王五","age":4,"gender":"男"}
            ]
        }
    });
</script>
</body>
</html>

页面显示：

遍历对象

迭代对象，语法基本类似：

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的值
2个参数时，第一个是值，第二个是键
3个参数时，第三个是索引，从0开始

示例：遍历对象中的每一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <ul>
            <li v-for="(value,key,index) in person">
                {{index}}--{{key}}--{{value}}
            </li>
        </ul>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{
            person:{"name":"张三", "age":13, "address":"中国"}
        }
    });
</script>
</body>
</html>

效果：

key

key的作用：

key是该项的唯一标识，
使用key这个功能可以有效的提高渲染的效率；
key一般使用在遍历完后，想要增、减集合元素的时候，更加方便。

示例：

<ul>
	<li v-for="(item,index) in items" :key="index"></li>
</ul>

这里绑定的key是数组的索引，应该是唯一的

v-if与v-show

v-if(条件判断)

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <button @click="show = !show">点我</button>
        <h2 v-if="show">
            v-if测试
        </h2>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{
            show:true
        }
    });
</script>
</body>
</html>

效果：

v-else

v-else 指令表示 v-if 的“else 块”：

注：

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
v-else-if ：充当 v-if 的“else-if 块”，可以连续使用
v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <ul>
            <li v-for="(user,index) in users" v-if="user.gender=='女'" style="background-color: red">
                {{index}}----{{user.name}}--{{user.age}}--{{user.gender}}
            </li>
            <li v-else style="background-color: blue">
                {{index}}----{{user.name}}--{{user.age}}--{{user.gender}}
            </li>
        </ul>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{
            users:[
                {"name":"张三","age":8,"gender":"男"},
                {"name":"李四","age":12,"gender":"女"},
                {"name":"王五","age":4,"gender":"男"}
            ]
        }
    });
</script>
</body>
</html>

效果：

v-show(根据条件展示元素)

用法与v-if大致一样，类似

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。

v-show 只是简单地切换元素的 CSS 属性display 。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <button @click="show = !show">点我</button>
        <h2 v-show="show">
            Hello VueJS.
        </h2>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{
            show:true
        }
    });
</script>
</body>
</html>