条件渲染-v-if // v-else // v-else if // v-show

条件渲染-v-if

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><!-- 如果 v-if 指令的值是数据，则先将数据转换成布尔值，如果值为 true 就渲染，否则不渲染 --><h1 v-if="true">如果条件为真，我就会渲染。</h1><!-- 如果 v-if 指令的值是条件表达式，则条件为真就渲染，否则不渲染 --><h1 v-if="12 > 24">如果条件为真，我就会渲染。</h1></div><script src="./vue.js"></script><script>new Vue({data: {}}).$mount('#app')</script>
</body></html>

条件渲染-v-else

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><div v-if="isTrue"><h1>如果条件为真，显示第一个标题。</h1><h1>如果条件为真，显示第一个标题。</h1></div><div v-else><h1>如果条件为假，显示第二个标题。</h1><h1>如果条件为假，显示第二个标题。</h1></div></div><script src="./vue.js"></script><script>new Vue({data: {isTrue: true}}).$mount('#app')</script>
</body></html>

条件渲染-v-else-if

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><h1 v-if="count >= 5000">钻石会员</h1><h1 v-else-if="count >= 4000">铂金会员</h1><h1 v-else-if="count >= 3000">黄金会员</h1><h1 v-else-if="count >= 2000">白银会员</h1><h1 v-else-if="count >= 1000">青铜会员</h1><h1 v-else>普通会员</h1></div><script src="./vue.js"></script><script>new Vue({data: {// 积分为 3000count:3000}}).$mount('#app')</script>
</body></html>

条件显示-v-show

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><h1 v-show="isShow">1. 如果条件为真，我就显示，否则隐藏。</h1><h1 v-if="isShow">2. 如果条件为真，我就渲染，否则渲染。</h1></div><script src="./vue.js"></script><script>new Vue({data: {isShow: false}}).$mount('#app')/* 共同点：都能实现元素的可见和不可见。区别：v-if 会在页面上删除或添加元素，而 v-show 只是通过 CSS 隐藏和显示元素。使用场景：由于 v-if 需要消耗更多的资源（效率低，开销大），因此，在需要频繁地显示和隐藏元素时，建议使用 v-show。*/</script>
</body></html>

条件渲染-v-if // v-else // v-else if // v-show相关推荐

白杨SEO：抖音官方企业蓝V认证有什么用？蓝V认证有哪些好处、具体怎么弄、需要哪些资料与认证流程
前言:这是白杨SEO公众号原创第451篇.为什么想到写这个?很多人想从抖音上搞流量,不管是推荐流量还是关键词SEO搜索流量,都忽略了最本质的-转化!要想更好的转化,抖音企业蓝V认证必不可少,所以来分享 ...
log加时间 securecrt_今日头条如何加V？学会这几招加V很容易
轻松玩转今日头条,学会这几招加黄V超容易,让"大智"忠臣为你服务!人人都能加黄V!加v就意味着你是某个领域的"专家"了,身份的象征!那么如何在今日头条站稳脚,快 ...
vector＜int＞ v, vector＜int＞ v(n) 与vector＜int＞ v[n]的区别
一.vector<int> v表示声明一个容器v,并且不给他预定存储空间. 运行: vector<int> v;cout << v.size(); 输出为: 0 二 ...
oracle授权v$lock,Oracle八大性能视图之v$lock
SQL> desc v$lock; 名称是否为空? 类型 ------------------------------ ...
持续排名GITHUB榜首的V语言竟是C++的孪生兄弟-V版毁灭战士值得点赞
最近V语言持续在GITHUB上霸屏,而笔者在上周介绍了V语言的一些基础,详见:GITHUB排行榜C位出道-手把手教你玩转V语言版的俄罗斯方块,而这周我也持续关注了V语言的动态,这次带大家玩一下V语言版 ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
Vue之概述、基本使用、data数据和if条件渲染
一.Vue概述 Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增. Vue.js读音 ...
列表渲染 wx:key 的作用、条件渲染 wx:if 与 hidden 的区别
这是微信小程序踩坑系列的第三篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的<微信小程序>专栏. 前言开发微信小程序离不开"页面渲染",对于初学者来说很难理解 ...
react把表格渲染好ui_在React中实现条件渲染的7种方法
借助react,我们可以构建动态且高度交互的单页应用程序,充分利用这种交互性的一种方法是通过条件渲染. 条件渲染一词描述了根据某些条件渲染不同UI标签的能力.在react文档中,这是一种根据条件渲染不 ...
Vue.js 条件渲染
v-if 在字符串模板中,比如 Handlebars,我们得像这样写一个条件块:  {{#if ok}}<h1>Yes</h1 ...

条件渲染-v-if // v-else // v-else if // v-show

条件渲染-v-if

条件渲染-v-else

条件渲染-v-else-if

条件显示-v-show

条件渲染-v-if // v-else // v-else if // v-show相关推荐

最新文章

热门文章