分支循环

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

随机推荐

数据分析-RFM模型用户分析
RFM模型根据美国数据库营销研究所Arthur Hughes的研究,客户数据库中有3个神奇的要素,这3个要素构成了数据分析最好的指标: 最近一次消费 (Recency) 消费频率 (Frequenc ...
pytest的fixture怎么用？
文章总览图 fixture和unittest是冲突的.舍弃unittest只用pytest. 会遇到在很多用例当中,它的前置条件是长得一样的.用例写的越来越多的时候,肯定会遇到前置条件都差不多,大家差 ...
Java多线程_生产者消费者模式2
在我的上一条博客中,已经介绍到了多线程的经典案列——生产者消费者模式,但是在上篇中用的是传统的麻烦的非阻塞队列实现的.在这篇博客中我将介绍另一种方式就是:用阻塞队列完成生产者消费者模式,可以使用多种阻 ...
[CSP-S2019]括号树题解
CSP-S2 2019 D1T2 刚开考的时候先大概浏览了一遍题目,闻到一股浓浓的stack气息调了差不多1h才调完,加上T1用了1.5h+ 然而T3还是没写出来,滚粗思路分析很容易想到的常规操 ...
学习seo赚钱一定要有超前的思路和眼光
http://www.wocaoseo.com/thread-100-1-1.html 日子过的真是快,一天又一天,一年又一年,虽然过年的脚步将近,火车票的问题还是没有解决,昨天忙活了半 ...
C++入门记-构造函数和析构函数
前文回顾本文档环境基于Vscode + GCC + CodeRunner 关于C++的环境搭建请参考下面链接: C++入门记-大纲由于本人具有C#开发经验,部分相同的知识就不再赘述了.只列一下需要 ...
Less 预处理笔记
1. less 简介 1. less是CSS的预编译器,可以扩展CSS语言(当然也兼容CSS),可以定义变量.混合.函数等等,让CSS代码更易维护和扩展 2. less与传统写法相比: less后缀为 ...
VS2015+opencv3.1.0 imshow()函数出现中文乱码----问题一
Visual Studio提供高级保存选项功能,它能指定特定代码文件的编码规范和行尾所使用的换行符.在Visual Studio 2015中,该命令没有默认显示在“文件”菜单中.用户需要手工设置,才能 ...
php验证当前是设备是电脑端还是手机端
<?php // 验证设备为PC还是WAP $agent = $_SERVER['HTTP_USER_AGENT']; if(strpos($agent,"comFront" ...
4-6年经验左右、优秀的 Java 程序员应该具备的技能
4-6年经验左右.优秀的 Java 程序员应该具备的技能有哪些,按“专业技能”和“项目”两块,包括但不限于以下内容. 专业节能方面基础:JDK 常用类的原理.源码.使用场景. 设计模式:常用几种的原 ...

Vue 分支循环