分支循环

　　在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 分支循环的更多相关文章

python_分支循环
什么是分支+循环? --不同条件进行不同逻辑处理 -- 分支 --满足条件进行反复相同逻辑处理 -- 循环分支的形式? -- if 条件: 执行体 else: 执 ...
Vue中循环的反人类设计
今天学习Vue到循环那里,表示真是不能理解Vue的反人类设计具体看代码吧! <!DOCTYPE html> <html> <head> <meta char ...
vue v-for循环的用法
1.v-for循环普通数组 ①创建vue对象 ② 循环数据结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对 ...
第十九节：Java基本数据类型，循环结构与分支循环
基本数据类型 Java中的基本数据类型,有8种,在Java中有四种类型,8种基本数据类型. 字节 boolean 布尔型为1/8 byte 字节类型为1 short 短整型为2 char 字符型为2 ...
第三次实验计算分段函数第四次计算分段函数和循环NEW 第五次分支+循环加强版实验报告
一.实验题目,设计思路,实现方法第四次分支+循环加强版 (2-2计算个人所得税,2-7 装睡,2-8计算天数) 设计思路:2-2 用if-else的语句,与计算分段函数的题类似的做法:2-7 运用 ...
Vue.js——循环（Java、JSTL标签库、数据库）
一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ...
vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
vue.js循环语句
vue.js循环语句循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组, site 是数组元素迭代的别名. v-for 可以 ...
java基础二分支循环
分支循环: if... if...else... if...else if... if...else if...else... switch...case...defau ...

随机推荐

团队作业5：Alpha版本测试和发布（歪瑞古德小队）
目录一.项目文档和代码二.Alpha版本测试报告 2.1 功能测试 2.1.1 功能列表 2.1.2 场景测试 2.1.3 测试结果 2.1.4 bug清单 2.2 兼容性测试 2.3 性能测试 ...
【转】Python进度条tqdm的使用
有时候在使用Python处理比较耗时操作的时候,为了便于观察处理进度,这时候就需要通过进度条将处理情况进行可视化展示,以便我们能够及时了解情况.这对于第三方库非常丰富的Python来说,想要实现这一功 ...
高效IO解决方案-Mmap「给你想要的快」
随着技术的不断进步,计算机的速度越来越快.但是磁盘IO速度往往让欲哭无泪,和内存中的读取速度有着指数级的差距:然而由于互联网的普及,网民数量不断增加,对系统的性能带来了巨大的挑战,系统性能往往是无数技 ...
ABP VNext实践之搭建可用于生产的IdentityServer4
一.前言用了半年多的abp vnext,在开发的效果还是非常的好,可以说节省了很多时间,像事件总线.模块化开发.动态API进行远程调用.自动API控制器等等,一整套的规范,让开发人员更方便的集成,提 ...
Laravel Pipeline原理及使用
Laravel Pipeline原理及使用开发中可能遇到非常冗长的逻辑,以至于我们想将针对性逻辑拆分出来,但是又拿不准该如何拆分才能实现较高的扩展性并保证较高的维护性,或者说不知道如何优雅的将待处理 ...
Docker 容器编排利器 Docker Compose
Compose 简介通过前面几篇文章的学习,我们可以通过 Dockerfile 文件让用户很方便的定义一个单独的应用容器.然而,在日常工作中,经常会碰到需要多个容器相互配合来完成某项任务的情况,例如 ...
08_Python的数据类型
1.数字(整型int 浮点型float 复数complex) 1.数字概述不可变类型,一旦创建不可修改,不是迭代对象,属于原子型 2.整型数int 概述: 整型数是不带有小数部分的数字,包括自然数, ...
本地模拟 gitlab ci 的 demo 项目
构建好的镜像能跑起来, 项目地址: https://github.com/szliugx/gitlab-ci-local 为了不每次提交,本地可以做一些模拟 gitlab ci 的测试≍,主要实现方式 ...
hyperledger explorer 结合 fabric1.4 搭建区块链浏览器踩坑记录
博主通过这篇博客的步骤搭建区块链浏览器:https://blog.csdn.net/qq_32675427/article/details/99946945 进行到下面这一步时出现各种异常,浪费了博主 ...
Python中自己不熟悉的知识点记录
重点笔记: Python 它是动态语言动态语言的定义:动态编程语言是高级程序设计语言的一个类别,在计算机科学领域已被广泛应用.它是一类在运行时可以改变其结构的语言 : ...

Vue 分支循环