分支循环

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

随机推荐

第二篇 Scrum冲刺博客
一.会议图片二.项目进展成员完成情况今日任务冯荣新搜索框,首页轮播图,分类导航商品列表,商品详情轮播图陈泽佳背景展示,选择并显示图片历史足迹,静态页面徐伟浩登录权限获取商品信 ...
pytest的fixture怎么用？
文章总览图 fixture和unittest是冲突的.舍弃unittest只用pytest. 会遇到在很多用例当中,它的前置条件是长得一样的.用例写的越来越多的时候,肯定会遇到前置条件都差不多,大家差 ...
FinalShell远程连接工具推荐
今天给大家推荐一个类似Xshell的工具FinalShell,这个工具也使用了很长时间了, Windows和Mac版本都有,方便连接虚拟机可以很方便的上传文件,有兴趣可以试试这款软件. 地址:htt ...
seo成功案例的背后秘密
http://www.wocaoseo.com/thread-319-1-1.html 刚刚在seo群内一个企业主告诉我,他在淘宝找了做seo排名的,在交了首付后,对方却跑路了.对方刚刚在淘宝开店,然 ...
Qt 子窗口监听主窗口信号
Qt 子窗口监听主窗口信号(转载) 原文链接:https://www.cnblogs.com/ybqjymy/p/12169762.html 1 MainWindow *ptr = NULL; 2 ...
Apache Tika实战
Apache Tika实战 Tika 简介 Apache Tika 是一个内容分析工具包,可以检测上千种文件类型,并提取它们的元数据和文本.tika在设计上十分精巧,单一的接口使它易于使用,在搜索引擎 ...
npm install @wepy/cli -g 出错
npm install @wepy/cli -g 出错:npm ERR! Unexpected end of JSON input while parsing near '...1.0.0" ...
php验证当前是设备是电脑端还是手机端
<?php // 验证设备为PC还是WAP $agent = $_SERVER['HTTP_USER_AGENT']; if(strpos($agent,"comFront" ...
教你如何在linux操作系统下玩【俄罗斯方块】高清+语音教程
主讲人小冰QQ:986945193 新浪微博:http://weibo.com/mcxiaobing 百度贴吧:忆驹家族小冰腾讯微博:http://t.qq.com/q986945193 高清视频 ...
Unity 打AssetBundle和加载方案
一.如何组织assetBundle: unity5以前,打包需要自己去找依赖,然后需要按照拓扑图顺序压入AB栈,这样在最后打AB时才能有效利用依赖(栈内已有的AB才能作为依赖). unity5.x后, ...

Vue 分支循环