Vue.js实例学习:条件渲染
2018-03-06 13:48
1096 查看
一、v-if
在 Vue 中,v-if 相当于 if(){} ; v-else 相当于 else{} ; v-else-if相当于elseif(){}
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。 v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
1、v-if、v-else
<div id="app"> <p v-if="ok">yes</p> <p v-else>no</p> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ //ok:0, //no //ok:null, //no //ok:"", //no //ok:undefined, //no //ok:false, //no //ok:, //报错 //ok:" ", //yes //ok:"false", //yes ok:true, //yes } }); </script>
输出结果 在注释中已打出。
也可以在 < template> 元素上使用 v-if 条件渲染分组
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
2、v-else-if
<div id="app"> <div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else-if="type === 'C'">C</div> <div v-else>Not A/B/C</div> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ type:'D' } }); </script>
输出结果:Not A/B/C
3、实例
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换:
<div id="app"> <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template> <button @click="toggleLoginType">Toggle login type</button> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ loginType:'username' }, methods: { toggleLoginType: function () { return this.loginType = this.loginType === 'username' ? 'email' : 'username'; } } }); </script>
点击前:
点击后:
二、v-show
v-show 也是条件渲染指令。不同v-if的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 只是简单地切换元素的 CSS 属性 display。
<div id="app"> <div v-show="ok">能看到我吗?</div> <button @click="toggleDisplay">Toggle Display</button> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ ok:1 }, methods: { toggleDisplay: function () { return this.ok = this.ok === 1 ? 0 : 1; } } }); </script>
输出:
点击按钮后输出:
注意,v-show 不支持 元素,也不支持 v-else。
三、v-if vs v-show
1、v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被 销毁和重建;v-show 只是简单地切换元素的 CSS 属性 display。
2、v-if “懒“:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
v-show“勤“: 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
四、v-if 与 v-for
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。相关文章推荐
- Vue.js入门学习--v-if 组合 v-else-if条件指令渲染DOM(三)
- vue.js实现条件渲染的实例代码
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- Vue.js 学习6 条件渲染与列表渲染
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- Vue.js 学习(6) -- Vue指令之:条件渲染
- 学习vue.js条件渲染
- vue.js,ajax渲染页面的实例
- Vue.js学习和第一个实例
- React.js学习1——基础知识、JSX语法、组件、React State、React Props、React事件处理、React 条件渲染、条件渲染、React 组件 API
- Vue.js源码学习四 —— 渲染 Render 初始化过程学习
- Vue.js 条件渲染 v-if、v-show、v-else
- Vue.js 学习(2) -- Vue实例
- Vue.js教程5-条件渲染
- Vue.js实例学习:表单输入绑定
- Vue.js入门学习--列表渲染--v-for遍历数组生成元素(四)
- Vue.js学习(一):用render函数渲染组件
- Vue.js-条件渲染
- vue.js条件渲染
- Vue.js实例学习:Class 与 Style 绑定