分支循环

　　 在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. pytest「conftest、pytest参数化、重运行、出测试报告」

    文章总览图 一.conftest问题整理: 1.这个conftest.py分路径吗?如果在TestCases下建这个包可以直接用吗? TestCases这里有ModeA和ModeB,想在ModeA或M ...

  2. HTML5实战与剖析之媒体元素

    随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了.很恰巧的是,移动端对HTML ...

  3. 测试必须学spring RESTful Service（上）

    文末我会说说为什么测试必须学spring. REST REST,是指REpresentational State Transfer,有个精辟的解释什么是RESTful, 看url就知道要什么 看met ...

  4. 接口测试中GET方法的获取

    今天在这里给大家介绍一下get方法,其实这些方法大家可以看一下源码里面的介绍只需要在代码中输入: import requests help(requests) 就可以看到带有示例的解释: 现在我们来完 ...

  5. Maven快速入门（四）Maven中的pom.xml文件详解

    上一章,我们讲了Maven的坐标和仓库的概念,介绍了Maven是怎么通过坐标找到依赖的jar包的.同时也介绍了Maven的中央仓库.本地仓库.私服等概念及其作用.这些东西都是Maven最基本.最核心的 ...

  6. 终于弄明白了 Singleton,Transient,Scoped 的作用域是如何实现的

    一:背景 1. 讲故事 前几天有位朋友让我有时间分析一下 aspnetcore 中为什么向 ServiceCollection 中注入的 Class 可以做到 Singleton,Transient, ...

  7. sha1sum校验方法

    sha1sum校验方法,我们可以保存到一个文件中.还可以根据已经得到的hash来确认文件.MD5类似. [root@ffcs211 test_dir]# sha1sum New.EXE 3fe44e8 ...

  8. boot磁盘空间大于80警报

    WARNING=80SPACE_USED=`df |grep '^/dev/sda' |tr -s ' ' %|cut -d% -f5|sort -n|tail -n1`[ "$SPACE_ ...

  9. Currency Exchange（SPFA判负环）

    Several currency exchange points are working in our city. Let us suppose that each point specializes ...

  10. Codeforces 1321D Navigation System

    题意 有个人要从\(s\)走到\(t\),经过的路径给定.导航系统每次会显示当前节点到\(t\)的最短路,有多条就显示其中之一.这个人如果按照导航走,那么啥都没变.如果没有按导航走导航就会重新导航.问 ...