Vue.js之if分支和for循环

cloudOnSkyline

已于 2022-07-11 20:12:27 修改

阅读量754

点赞数

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

于 2022-07-11 19:41:08 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125728360

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

1.if分支

2.for循环

本文主要介绍Vue.js中if分支以及for循环的使用。

1.if分支

Vue.js提供了v-if、v-else-if以及v-else的分支语句，v-if可与v-else-if搭配使用。当判定结果符合条件时，相应的元素会被渲染出来，不符合条件的元素不会进行渲染。如下例所示。

 <div v-if="score>=90" v-text="'优秀'"></div>
 <div v-else-if="score>=80&&score<90" v-text="'良好'"></div>
 <div v-else-if="score>=70&&score<80" v-text="'一般'"></div>
 <div v-else-if="score>=60&&score<70" v-text="'及格'"></div>
 <div v-else v-text="'不及格'"></div>

score的值为98

 new Vue({
            el: '#app',
            data: {
                score: 98
            }
        })

渲染结果如下：

注意：另外介绍v-show指令，实质上是display属性的封装，通过true或false的设置显示或隐藏元素。如下所示

 <div v-text="'学生成绩'" v-show="false"></div>

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <div v-if="score>=90" v-text="'优秀'"></div>
        <div v-else-if="score>=80&&score<90" v-text="'良好'"></div>
        <div v-else-if="score>=70&&score<80" v-text="'一般'"></div>
        <div v-else-if="score>=60&&score<70" v-text="'及格'"></div>
        <div v-else v-text="'不及格'"></div>
        <div v-text="'学生成绩'" v-show="false"></div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                score: 98
            }
        })
    </script>
</body>

</html>

2.for循环

Vue.js提供v-for指令实现for循环,基本用法如下所示

 <ul>
            <li v-for="(element,index) in color" v-text="element+' 索引为: '+index"></li>
        </ul>

（1）遍历数组

利用element可访问数组中的元素，利用index可访问元素的索引。注：随着循环的执行，会创建相应的li元素。还可用v-for遍历较复杂的数据结构，如下面的对象数组，每次可遍历每个元素的所有属性。

<ul>
            <li v-for="element in student" :key="element.id">
                <span v-text="element.name"></span>
                <span v-text="'------'"></span>
                <span v-text="element.age"></span>
                <span v-text="'------'"></span>
                <span v-text="element.id"></span>
            </li>
        </ul>

相应的数据设置如下：

data: {
                color: ['red', 'blue', 'yellow', 'pink'],
                student: [{
                    id: 1,
                    name: 'zs',
                    age: 20
                }, {
                    id: 2,
                    name: 'ls',
                    age: 25
                }, {
                    id: 3,
                    name: 'w5',
                    age: 20
                }]
            }

效果如图：

注：Vue.js通过给元素设置key属性，同时赋予唯一值（如id），以此提高程序性能。

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <ul>
            <li v-for="(element,index) in color" v-text="element+' 索引为: '+index"></li>
        </ul>
        <ul>
            <!-- 绑定key，给每项一个唯一标识符,为了提高性能 -->
            <li v-for="element in student" :key="element.id">
                <span v-text="element.name"></span>
                <span v-text="'------'"></span>
                <span v-text="element.age"></span>
                <span v-text="'------'"></span>
                <span v-text="element.id"></span>
            </li>
        </ul>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                color: ['red', 'blue', 'yellow', 'pink'],
                student: [{
                    id: 1,
                    name: 'zs',
                    age: 20
                }, {
                    id: 2,
                    name: 'ls',
                    age: 25
                }, {
                    id: 3,
                    name: 'w5',
                    age: 20
                }]
            }
        })
        var lis = document.querySelectorAll('li');
        console.log(lis[lis.length - 1].key);
    </script>
</body>

</html>

（2）遍历对象

可指定三个形参，第一个表示对象属性的值，第二个表示对象的属性名，第三个表示索引号。案例如下。（注：在遍历的同时可以利用v-if进行指定数据的渲染，下面案例会显示属性名为“name”的指定数据）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-if='property=="name"' v-for="(value,property,index) in student" v-text="value+'---'+property+'---'+index"></div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                student: {
                    name: 'zs',
                    age: 20
                }
            }
        })
    </script>
</body>

</html>