分支循环

　　在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 ...

随机推荐

tp6 不能使用vendor
从thinkphp 5.1.x后vendor的使用方法发生变化,文档又没有详细说明.官方真的太坑了! 在thinkPHP 5.1.X后新版取消了Loader::import方法以及import和ven ...
All in One 你想知道的 hacker 技术都在这里
作者:HelloGitHub-小鱼干 hacker 这个词,大多数理解为黑客,而维基百科对其的定义为--黑客(Hacker)是指对设计.編程和计算机科学方面具高度理解的人,在本文中 hacker 主要 ...
小程序 RecorderManager计时不准确问题
官方文档:RecorderManager 录音管理器,内部实现计时不准确.有以下俩个问题: 点击暂停继续,当录音结束时,stop返回的时间包含了暂停的那一段时间. 正常录音,录音文件的时长有概率少个1 ...
shell 三剑客之 grep
grep 的全称是 Globally search a Regular Expression and Print,是一种强大的文本搜索工具,它能使用特定模式匹配(包括正则表达式)搜索文本,并默认输出匹 ...
借助FRP反向代理实现内网穿透
一.frp 是什么? frp 是一个专注于内网穿透的高性能的反向代理应用,支持 TCP.UDP.HTTP.HTTPS 等多种协议.可以将内网服务以安全.便捷的方式通过具有公网 IP 节点的中转暴露到公 ...
[ASP.NET Core开发实战]基础篇06 配置
配置,是应用程序很重要的组成部分,常常用于提供信息,像第三方应用登录钥匙.上传格式与大小限制等等. ASP.NET Core提供一系列配置提供程序读取配置文件或配置项信息. ASP.NET Core项 ...
Nodejs模块：querystring
/** * @description querystring模块 */ const querystring = require('querystring'); const url = 'https:/ ...
iOS NSOperation
iOS NSOperation 一.简介除了,NSThread和GCD实现多线程,配合使用NSOperation和NSOperationQueue也能实现多线程编程 NSOperation和NSOp ...
C:将算术表达式的符号和数分开
程序: #include <stdio.h> #include <string.h> static int pos=; static char* line; void test ...
linux 安装ifconfig
一:使用yum命令下载安装wget 查看镜像中ifconfig安装包 yum search ifconfig yum install net-tools.x86_64 -y 下面按照提示一步步安装即可 ...

Vue 分支循环