分支循环

　　 在Vue中，分支循环也是使用标签属性指令完成的，这一点与后端模板语法不太相同。

v-for

　　 下面是通过v-for进行循环，不光可以拿到元素本身，也可以拿到索引值。

　　 如果数据是对象类型，则可以使用(key,value,index)进行取值。

　　 需要注意的是，当不指定key/value而只指定一个迭代变量，那么该迭代变量取值会取value

　　

<body>

    <main id="id-1">

        <ul>

            <li v-for="(ele,index) in array">{{ele}}-{{index}}</li>

        </ul>

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            array:["第一个元素","第二个元素","第三个元素"],

        }

    })

</script>

v-if

　　 v-if，当if后的条件为true时则渲染出该标签以及该标签内的子标签。为false时则不渲染。

　　

<body>

    <main id="id-1">

        <p v-if="conditionOne">渲染我</p>

        <p v-if="conditionTwo">不渲染我</p>

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            conditionOne:true,

            conditionTwo:false,

        },

    })

</script>

v-else

　　 该指令应当和v-if连用，效果与v-if相反。

　　 这两组指令一个代表如果渲染，一个代表否则渲染。

　　

<body>

    <main id="id-1">

        <p v-if="conditionOne">条件为真渲染我</p>

        <p v-else>否则渲染我</p>

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            conditionOne:false,

        },

    })

</script>

v-else-if

　　 额外的判断条件，当有v-if/v-else/v-else-if在时，只会执行其中的一条。

　　

<body>

    <main id="id-1">

        <p v-if="grades > 90">成绩优秀</p>

        <p v-else-if="grades > 60">成绩及格</p>

        <p v-else-if="grades > 40">成绩一般</p>

        <p v-else>成绩较差</p>

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            grades:80,

        },

    })

</script>

分支逻辑

　　 在v-if/v-else/v-else-if中，可以使用逻辑判断与或非。

符号 描述
&& 与（优先级3），一真一假取一假
|| 或（优先级2），一真一假取一真
! 非（优先级1），两个为真才取真

　　

<body>

    <main id="id-1">

        <p v-if="conditionOne && conditionTwo">两个为真，渲染</p>

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            conditionOne:true,

            conditionTwo:true,

        },

    })

</script>

Vue 分支循环的更多相关文章

  1. python_分支循环

    什么是分支+循环? --不同条件进行不同逻辑处理            -- 分支 --满足条件进行反复相同逻辑处理     -- 循环 分支的形式? -- if 条件:  执行体   else: 执 ...

  2. Vue中循环的反人类设计

    今天学习Vue到循环那里,表示真是不能理解Vue的反人类设计 具体看代码吧! <!DOCTYPE html> <html> <head> <meta char ...

  3. vue v-for循环的用法

    1.v-for循环普通数组 ①创建vue对象 ② 循环数据 结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对 ...

  4. 第十九节：Java基本数据类型，循环结构与分支循环

    基本数据类型 Java中的基本数据类型,有8种,在Java中有四种类型,8种基本数据类型. 字节 boolean 布尔型为1/8 byte 字节类型为1 short 短整型为2 char 字符型为2 ...

  5. 第三次实验计算分段函数 第四次计算分段函数和循环NEW 第五次分支+循环加强版 实验报告

    一.实验题目,设计思路,实现方法 第四次分支+循环 加强版 (2-2计算个人所得税,2-7 装睡,2-8计算天数) 设计思路:2-2 用if-else的语句,与计算分段函数的题类似的做法:2-7 运用 ...

  6. Vue.js——循环（Java、JSTL标签库、数据库）

    一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ...

  7. vue.js循环for（列表渲染）详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  8. vue.js循环语句

    vue.js循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组, site 是数组元素迭代的别名. v-for 可以 ...

  9. java基础二 分支循环

    分支循环:    if...    if...else...    if...else if...    if...else if...else...    switch...case...defau ...

随机推荐

  1. Learning in Spiking Neural Networks by Reinforcement of Stochastic Synaptic Transmission

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! Summary 众所周知,化学突触传递是不可靠的过程,但是这种不可靠的函数仍然不清楚.在这里,我考虑这样一个假设,即大脑利用突触传递的随机 ...

  2. Webstorm的常用快捷键

    编辑 Ctrl + Space 基本代码完成 (任何类. 方法或变量名称) Ctrl + Shift + Enter 完整的语句 Ctrl + P (在方法调用参数) 内的参数信息 Ctrl + Q ...

  3. asyncio系列之Lock实现

    import types import select import time import socket import functools import collections class Futur ...

  4. 安装yarn 心得分享

    初次使用yarn ,坑的我,全局安装完@vue/cli,安装之后就是说vue不是内部命令,研究好久,总结一下分享大家一起学习 1,首先安装yarn: 安装yarn 去官网下载yarn 安装包 默认安装 ...

  5. git ssh配置

    SSH KEY的配置 生成 SSH KEY ssh-keygen -t rsa -b 4096 -C "your_email@example.com" 文件在哪里生成的 C:\用户 ...

  6. 面试中的这些点，你get了吗？

    一.前言 因为疫情的原因,小农从七月份开始找工作,到现在已经工作了一个多月了,刚开始找工作的时候,小农也担心出去面试技能不够,要懂的东西很多,自己也准备可能会面试一段时间,从找工作到入职花了十几天,总 ...

  7. Spring Boot 如何快速集成 Redis 哨兵？

    上一篇:Spring Boot 如何快速集成 Redis? 前面的分享栈长介绍了如何使用 Spring Boot 快速集成 Redis,上一篇是单机版,也有粉丝留言说有没有 Redis Sentine ...

  8. 三年前买的T440p目前淘宝二手价2300左右

    当时可是近六千买的,唉... 有消息说六千多电脑和四千多的区别是多了OEM Windows的价钱,如果一重装,等于把差价抹了... 看来买电脑,买车,买手机都该秉承一个够用就好的原则,不然当时的顶配不 ...

  9. leetcode刷题-93复原IP地址

    题目 给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 有效的 IP 地址正好由四个整数(每个整数位于 0 到 255 之间组成),整数之间用 '.' 分隔. 示例: 输入: &q ...

  10. 自定义AQS独占模式下的同步器来实现独享锁

    自定义AQS独占模式下的同步器来实现独享锁 /** * 自定义AQS独占模式下的同步器来实现独享锁 */ public class Mutex implements Lock, java.io.Ser ...