分支循环

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

随机推荐

Windows下搭载虚拟机以及环境安装
前言最近回到家中进行赛前自主提升模拟赛考虑到考试环境是NOI Linux 而大多数同学电脑环境为Windows 有同学想要模拟真实考试环境但是NOI Linux的系统过于"阉割版&qu ...
系综的实现方式（nve、nvt、npt）
一.NVE系综更新位置和速度,v和e恒定. 二.NVT系综几种实现的方式: 如: fix 1 all nve #更新位置和速度,e和V保持不变.若只有这个命令,就只nve系综,如果和控温命令一起, ...
Lombok插件有望被Intellij IDEA收编以改善兼容性问题
1. 前言最近两个版本的Intellij IDEA没有办法使用lombok插件了,这种问题已经出现了多次,导致胖哥依然使用2020.1的旧版本.其实很多人和我一样也回滚到了旧版本.我一直认为是lom ...
java开发，入职半年，对未来迷茫，如何发展？
分享-更多精彩图片尽在大师助手个人建议,在JAVA方面,先学好JAVA SE.不管如何,基础才是上层建筑的一切.推荐去看jdk源码,推荐1.6或者1.7版本.因为1.8版本的源码中会有很多lambd ...
泊松分布算法的应用：开一家4S店
王老板开了一家4S店,卖新车为主,车型也很单一,可是每个月销量都变化很大,他很头疼,该怎么备货,头疼的是: 1)备货少了,可以来了没货可能就不买,去别的店了 2)备货多了,占用库存不说,长久卖不出去就 ...
【Android】java生成炫酷验证码，不区分大小写。登陆，发送手机验证码，防止注册机，android开发
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 微博:http://weibo.com/mcxiaobing 首先给大家看一下 ...
linux 增加新用户无法使用sudo命令解决办法
昨天一不小心把自己的系统搞崩了,也没有快照,没法进行还原操作,所以只能重装系统解决了,装完系统以后一切正常,当我新增了一个用户,使用sudo命令切换到root用户时,发现怎么都切换不过去,经过百度发现 ...
Ajax跨域解决方案大全
题纲关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨 ...
spring cloud 通过zuul网关去请求的时候报404的几个原因。
spring cloud 中 zuul 网关的那些坑: 1.检查你的服务是否正常启动. 2.检查你的服务是否正常注册到注册中心. 3.zuul网关的路由规则是会把你注册在注册中心的serviceId ...
Linux：正则表达式2
基础正则表达式 ^ : 以xx开头 $ :以xx结尾 ^$ :代表空行 . 任意一个字符 \ :转义符号,让有着特殊意义的字符可被使用 * :重复0个或多个前面的字符,例如 a* 2表示a后面 ...

Vue 分支循环