分支循环

　　 在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. First-Spike-Based Visual Categorization Using Reward-Modulated STDP

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! Abstract 强化学习(RL)最近以击败欧洲围棋冠军等重大成就重新受到欢迎.在这里,我们第一次表明,RL可以有效地用于训练一个脉冲神经 ...

  2. 自动部署Asp.Net Core到Docker

    原文链接:个人博客:自动部署Asp.Net Core至Docker 本文简介 最近在开发一个管理系统,代码框架是用的前后台分离的方式 后台使用的是Asp.Net Core平台,开发所有业务,向前台提供 ...

  3. Java中一个普通的循环为何从10开始到99连续相乘会得到0？

    这是一块非常简单的Java代码片段: public class HelloWorld{ public static void main(String []args){ int product = 1; ...

  4. 力扣Leetcode 55. 跳跃游戏

    跳跃游戏 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] 输出: ...

  5. 单表千万行数据库 LIKE 搜索优化手记

    我们经常在数据库中使用 LIKE 操作符来完成对数据的模糊搜索,LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. 如果需要查找客户表中所有姓氏是“张”的数据,可以使用下面的 SQL 语句 ...

  6. Android开发之封装log打印日志的工具类，实用logutils详细代码

    public final class LogUtil { /** all Log print on-off */ private final static boolean all = true; /* ...

  7. Apollo（阿波罗）配置中心Java客户端使用指南使用指南

          Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管 ...

  8. 公共项目开发：我为什么用 JSDoc，而不用 ts

    公共模块,通常会被多个项目.不同的开发人员使用,所以开发公共模块时,你自己会用还不够,要让所有人都能很快的知道怎么去使用,这一点很关键.通常会从3个方面做到这点: 精心分割代码逻辑,遵循开闭原则: 变 ...

  9. Codeforces1312E Array Shrinking 区间DP

    题意 给你一个数组\(a\),只要满足\(a_i=a_{i+1}\)就可以将这两个元素合并成一个值为\(a_i+1\)的元素,问数组最小长度. 解题思路 记得之前某场的F和这题差不多,当时好像是相邻且 ...

  10. centos7 RPM MySQL5.5

    一.安装MYSQL 把下载好的rpm版的mysql上传到centos7中,目前公司中最爱用的是5.5版本和5.7版本,推荐用5.5. 先安装服务端 rpm -ivh MySQL-server-5.5. ...