摘要：条件渲染也可以用添加一个块在中配合渲染一整组因为是一个指令，需要将它添加到一个元素上。最终的渲染结果不会包含元素。带有的元素始终会被渲染并保留在中。
条件渲染 v-if
Yes
也可以用 v-else 添加一个 “else” 块：
在中配合v-if 渲染一整组Yes
No
因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 元素当做包装元素，并在上面使用 v-if。最终的渲染结果不会包含 元素。
v-else v-else-ifTitle
Paragraph 1
Paragraph 2
v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。v-else-if，顾名思义，充当 v-if 的“else-if 块”。可以链式地使用多次：
及格
优秀
不及格
var vm=new Vue({ data:{ grade:60 } });用key管理可复用的元素类似于 v-else，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
var vm=new Vue({ el:"#app", data:{ loginType:"email" }, methods:{ qiehuan:function(){ if(this.loginType=="email"){ this.loginType=="username" }else{ this.loginType=="email" } } } });那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。
Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可：注意， v-show带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。
注意， v-show 不支持 语法，也不支持 v-else。 v-if vs v-showHello!
v-if与v-for一起用v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
- {{item.text}}
var vm=new Vue({
data:{
items:[
{text:"chifan",isOk:true},
{text:"shuijue",isOk:false},
{text:"kandianshi",isOk:true},
{text:"dayouxi",isOk:true},
{text:"kandianying",isOk:false},
]
}
});
如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 )上。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85151.html
相关文章
如何利用vue进行条件渲染
摘要：在中配合条件渲染一整组因为是一个指令，需要将它添加到一个元素上。因此，如果需要非常频繁地切换，则使用较好如果在运行时条件不太可能改变，则使用较好。 vue的条件渲染 v-if v-if指令可以插入和删除所命令的模板 Yes data:{ ok:true } 输出HTML Yes 当我们更改 ok 为 false时我们会发现页面的 Yes 消失，在控制台里面会发现 h1 标签也已...
1-2. Vue.js核心知识之模板渲染
摘要：使用了基于的模板语法，允许开发者声明式地将绑定至底层实例的数据。所有的模板都是合法的，所以能被遵循规范的浏览器和解析器解析。列表中使用把数组渲染成选项列表。我们通过这些渲染方式就可以轻松的通过数据控制页面的显示内容了。 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被...
Vue.js-内置指令
摘要：如果一次判断的是多个元素，可以在内置的元素上使用条件指令，最终渲染的结果不会包含该元素。列表渲染也支持用代替作为分隔符，它更接近迭代器的语法的表达式支持一个可选参数作为当前项的索引。分隔符前的语句使用括号，第二项就是当前项的索引。 学习笔记：内置指令 内置指令 基本指令 v-cloak v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的d...
Vue 的条件渲染和列表渲染
摘要：条件渲染上一篇与绑定下一篇的事件处理方法在中配合渲染一整组在使用控制元素的时候，我们需要将它添加到这个元素上去。最终的渲染结果不会包含元素。渲染如下列表渲染使用把一个数组对应为一组元素我们用指令根据一组数组的选项列表进行渲染。 条件渲染 上一篇：Class 与 Style 绑定：https://segmentfault.com/a/11...下一篇：Vue的事件处理方法：https:/...
Vue入门--基础语法
摘要：在模板中放入太多的逻辑会让模板过重且难以维护。它会根据控件类型自动选取正确的方法来更新元素。指令需要使用的语法，指的是原数据数组，指的是迭代的数组元素。 注：本教程所使用的vue版本为 2.5.16 MVC与MVVM MVC（Model-View-Controller）： M指的是从后台获取到的数据， V指的是显示动态数据的html页面， C是指响应用户操作、经过业务逻辑处理后去更新...
发表评论
0条评论
_ang
男|高级讲师
TA的文章
阅读更多
腾讯云11.11：1C2G5M轻量服务器48元/年,COM域名首年1元起,3500-7000元满减券
阅读 1721·2021-11-04 16:11
腾讯云/阿里云轻量应用服务器推荐：2核4G8M首年低至74元;2核2M5M仅60元/首年
阅读 3475·2021-09-09 11:33
前端每日实战：69# 视频演示如何用纯 CSS 创作一个单元素抛盒子的 loader
阅读 1654·2019-08-30 15:54
手写实现promise
阅读 694·2019-08-30 15:44
Hexo博客迁移之旅（Coding到腾讯云COS）+ Travis CI持续集成
阅读 3311·2019-08-30 15:43
window.devicePixelRatio 独立像素比（经典文章+原创）
阅读 2663·2019-08-30 13:06
动态添加+动态绑定（vue数据驱动思路）
阅读 1775·2019-08-29 17:00
【CSS练习】IT修真院--练习2-开发工具
阅读 984·2019-08-29 15:33
最新活动
<阅读需要支付1元查看
