所谓的条件，指的就是满足什么条件，允许做什么事，不满足时，是不允许做的。如共享单车，规定满12周岁或以上才可以骑行，没满的则不被允许。学每门编程语言，条件语句都是必须熟练掌握的，Vue3.0的也不例外。

4.1 v-if指令

在Vue3.0中，条件语句是通过v-if指令实现的。如果判断条件为True，就执行v-if语句里的内容，否则什么都不执行。

    vue3.0条件语法

`老陈说编程`

输出结果

如果v-if为false时，你不想输出空气，不想什么都不执行，那就其后面加上v-else指令。v-if和v-else搭在一起使用，规则是：v-if的条件为true时，执行v-if里的内容，否则执行v-else里的。

`老陈说编程`

`你说老陈不酷，那我不说编程了，说爱情去。`

输出结果

当然，你可能会根据老陈所说的编程语言，来决定老陈是否酷还是不酷，如果说的是你想学的编程语言，你大概率会说酷，甚至说很酷，否则就会说不酷，甚至说很丑。人性如此，你不用自责。

为此，我会说多个编程语言，逐步提高我的颜值。判断多个内容(语言)，用v-else-if语法。

`老陈说Vue3.0，很酷`

`老陈说前端，很酷`

`老陈说Java，很酷`

`老陈说App，很酷`

`老陈说Python，也酷`

输出结果

4.2 template

长得有点(不是特别)酷的你，可能早就注意到了，v-if指令，都是附加在一个元素上的；长得有特别(不是有点)丑的你，可能没有考虑到，如果想要实现切换多个元素，该如何？不用急，特别酷的老陈告诉你：你可以v-if放在元素中。

`老陈`

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。我在分享Python，前端(小程序)、Java和App方面的干货。关注我，没错的。

输出结果

4.3 v-show指令

如果你要实现业务方面的条件判断，用v-if指令就可以了；如果只是想切换一下CSS的内容，那你可以用v-show指令。v-show只是简单地切换元素的CSS属性值，不支持v-else，也不支持元素，它常用于隐藏或显示某个元素。

为了方便讲解，我提前说了v-on指令和事件，你可以不用理会，后面我会详细介绍这个内容的。

    vue3.0条件语法

报幕~~~

输出结果

好了，有关条件渲染和template的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。我在分享Python，前端、Java和App方面的干货。关注我，没错的。

#前端##Vue.js##JavaScript##程序员##Web#

freemaker if 多个条件_第4天｜14天搞定Vue3.0，条件渲染和template相关推荐

el-select change事件传多个参数_第8天 | 14天搞定Vue3.0，事件处理(详细)
在JavaScript语言中,当用户与UI组件交互时,UI组件能够激发一个相应事件.例如,用户按动按钮.滚动文本.移动鼠标或按下按键等,都将产生一个相应的事件. Vue3.0使用v-on指令(缩写为@ ...
查询所有_学会DSUM函数，轻松搞定所有的数据查询与数据求和
在Excel表格中数据的查询与数据求和是我们经常会遇到的问题.今天和朋友们一起学习一下非常强大的DSUM函数,这个一个函数就可以轻松搞定单条件查询.多条件查询.反向查询.单条件求和.多条件求和. 一. ...
delphi if多个条件_屡试不爽！使用策略模式代替多个if条件语句
使用策略模式代替多个if条件语句一.背景: 1.1.多个if else语句,并且每个条件都有复杂的逻辑,代码变的异常臃肿. 1.2.维护成本很大,修改一个存在多年的类,要理清楚找到具体的if条件进行 ...
一个高质量的程序应具备哪些条件?_如何开好一个精品店？需要具备哪些条件？...
精品店小投资.低风险的特点吸引了很多的投资者,让他们心动不已.但想在激烈的竞争市场中站稳脚跟,不懂得一些技巧,是很难实现的.那么,如何开好精品店?需要具备哪些条件?下面,必多精致百货为大家解答一下. ...
python同时满足两个条件_「小白学Python」3分钟掌握Python条件语句if
Python有三类语句: 一是顺序语句,程序一行一行顺序执行,直到程序最后. 二是条件语句,程序运行到条件语句会进行判断,如果符合条件则运行其后的语句,如果不符合,则直接跳过.if条件语句. 三是循环 ...
mysql 拼接字符串作为where条件_工作总结篇：mysql使用字符串作为查询条件
前言:今天在做mysql的查询时遇到一个问题,情景是这样的,假如现在我的一张表里面有一个字段scode(表示商品编号),然后有一个字符串存储了多个商品编号,如"0001ME,0002BL&q ...
python爬虫结果是字节_入门爬虫？一文搞定！
为了感谢大家对"Python客栈"的关注与支持,我们每天会在留言中随机抽取三位粉丝发放6.6元小红包.快来参与吧! 文章分三个个部分两个爬虫库requests和selenium如 ...
dropdownlist三级联动怎么实现_简单三步，轻松搞定一级、二级、三级下拉菜单
工作中,为了录入数据方便,数据规范,我们经常采用下拉菜单来制作规范模板,今天,技巧君和大家分享一下一级.二级和三级联动下拉菜单制作方法,文末有示例文件下载方法哦! 下拉菜单示例一级下拉菜单一级下拉 ...
python做身份证识别_不到100行代码搞定Python做OCR识别身份证，文字等各种字体
不告诉你我用了它配合Python简简单单开发OCR识别,带你识别手写体.印刷体.身份证等N种,附代码! 一.你心目中的OCR 在你心目中,OCR是多大(-, 厉害,好厉害,非常厉害,-)呢? 是这么大 ...

freemaker if 多个条件_第4天｜14天搞定Vue3.0，条件渲染和template

4.1 v-if指令

`老陈说编程`

`老陈说编程`

`你说老陈不酷，那我不说编程了，说爱情去。`

`老陈说Vue3.0，很酷`

`老陈说前端，很酷`

`老陈说Java，很酷`

`老陈说App，很酷`

`老陈说Python，也酷`

4.2 template

`老陈`

4.3 v-show指令

freemaker if 多个条件_第4天｜14天搞定Vue3.0，条件渲染和template相关推荐

最新文章

热门文章