vue模板语法分支与循环

分支与循环

条件语句

可以使用下面指令进行条件的判断:

  • v-if
  • v-else-if
  • v-else
  • v-show

通常在这些指令的后面会等于一个判断语句,就像下面一样:

<div v-if="score > 90">优秀</div>
<div v-else-if="score < 90 && score > 80">良好</div>
<div v-else-if="score < 80 && score > 60">还行</div>
<div v-else>拉跨</div>

可以在 Vue 对象的 data 参数中声明 score 变量,当 score 的值不同时,页面中显示的内容也不同。如下案例:

<body>
    <div class="container">
        <div v-if="score > 90">优秀</div>
        <div v-else-if="score < 90 && score > 80">良好</div>
        <div v-else-if="score < 80 && score >= 60">还行</div>
        <div v-else>拉跨</div>

        <input type="text" v-model='score'>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '.container',
            data: {
                score: '100'
            }
        })
    </script>
</body>

结果:
在这里插入图片描述

上面 html 结构中虽然书写了多个 div 但是在页面渲染之后,只显示当前条件判断成功的 div

v-show 后面通常跟一个 flag 标志位,v-show 的标志位为 false 时,会将该元素的 display 属性置为 none

遍历数组

可以使用 v-for 对数组进行遍历,语法结构如下

<ul>
    <li v-for="i in item">{{i}}</li>
</ul>

其中 item 是要遍历的数组,i 是每次遍历数组的值。如下代码所示:

<body>
    <div class="container">
        <div>
            <ul>
                <li v-for="i in item">{{i}}</li>
            </ul>
        </div>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '.container',
            data: {
                item: [123, 234, 345, 456, 567]
            }
        })
    </script>
</body>

还可以获取当前遍历的索引值,需要写为下面这样:

<ul>
    <li v-for="(data, index) in item">{{data}}</li>
</ul>

data 为每次循环的值,index 为当前循环的索引值。

数组中也可以写为对象,在遍历时通过当前对象的属性来访问。如下代码所示:

<body>
    <div class="container">
        <ul>
            <li v-for="i in item">
                <p>{{i.name}}</p>
                <p>{{i.data}}</p>
            </li>
        </ul>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '.container',
            data: {
                item: [
                    { name: '123', data: "Hello" },
                    { name: '234', data: "Hi" },
                    { name: '345', data: "HEI" },
                    { name: '456', data: "asdasd" }
                ]
            }
        })
    </script>
</body>

key 属性

在遍历数据时,一般是对象形式的数组,为了提高性能通常为每个对象定义一个唯一的 id 属性,在遍历时,为元素添加 key 属性 属性值为当前的 id 值。如下代码所示:

<body>
    <div class="container">
        <ul>
            <li :key="i.id" v-for="i in item">
                <p>{{i.name}}</p>
                <p>{{i.data}}</p>
            </li>
        </ul>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '.container',
            data: {
                item: [
                    { id: '1', name: '123', data: "Hello" },
                    { id: '2', name: '234', data: "Hi" },
                    { id: '3', name: '345', data: "HEI" },
                    { id: '4', name: '456', data: "asdasd" }
                ]
            }
        })
    </script>
</body>

遍历对象

遍历对象时,v-for 指令中具有三个形参 value, key, index 三个位置的形参分别为:值、键、索引。语法结构:

<li v-for="(value, key, index) in obj">

如下代码所示:

<body>
    <div class="container">
        <ul>
            <li v-for="(value, key, index) in obj">
                <span>{{ value }}</span>
                <span>{{ key }}</span>
                <span>{{ index }}</span>
            </li>
        </ul>
    </div>

    <scri![遍历对象](img/遍历对象.png)pt src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '.container',
            data: {
                obj: {
                    name: '张三',
                    age: 18,
                    email: '123@qq.com'
                }
            }
        })
    </script>
</body>

结果:
在这里插入图片描述

如果把判断和循环结合起来,如下所示:

<li v-if="key=='name'" v-for=" (value, key, index) in obj">

上面代码中只有当前遍历的属性为 name 属性时才会生效

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页