v-if 语法(条件)
符合条件时显示 (渲染) 某一元素.
- <div id="app">
- <div v-if="ok">
- <h1>title</h1>
- </div>
- <div v-if="type==1">
- <h1>title2</h1>
- </div>
- <div v-else-if="type==2">
- <h1>title3</h1>
- </div>
- <div v-else>
- <h1>title4</h1>
- </div>
- <div v-if="2>1">
- <h1>title5</h1>
- </div>
- </div>
- <script>
- new vue({
- el: '#app',
- data: {
- type: '1',
- ok: true
- }
- })
- </script>
执行结果:
v-if 可以使用 data 对象, 也可以直接使用表达式(如: 2>1).
v-show 也可以达到根据条件显示元素的目的, 但是两者有一些区别.
v-if 与 v-show 区别:
相同点: v-if 与 v-show 都可以动态控制 dom 元素显示隐藏
不同点: v-if 显示隐藏是将 dom 元素整个添加或删除, 而 v-show 隐藏则是为该元素添加 CSS--display:none,dom 元素还在.
需要注意的是, 当一个元素默认在 CSS 中加了 display:none 属性, 这时通过 if-show 修改为 true 是无法让元素显示的. 原因是显示隐藏切换, 只是会修改 element style 为 display:"" 或者 display:none, 并不会覆盖掉或修改已存在的 CSS 属性.
更详细的区别这里直接引用 Young Dreamer 的博客内容:
1. 手段: v-if 是动态的向 DOM 树内添加或者删除 DOM 元素; v-show 是通过设置 DOM 元素的 display 样式属性控制显隐;
2. 编译过程: v-if 切换有一个局部编译 / 卸载的过程, 切换过程中合适地销毁和重建内部的事件监听和子组件; v-show 只是简单的基于 CSS 切换;
3. 编译条件: v-if 是惰性的, 如果初始条件为假, 则什么也不做; 只有在条件第一次变为真时才开始局部编译 (编译被缓存? 编译被缓存后, 然后再切换的时候进行局部卸载); v-show 是在任何条件下(首次条件是否为真) 都被编译, 然后被缓存, 而且 DOM 元素保留;
4. 性能消耗: v-if 有更高的切换消耗; v-show 有更高的初始渲染消耗;
5. 使用场景: v-if 适合运营条件不大可能改变; v-show 适合频繁切换.
v-for 语法(循环)
v-for 指令需要以 data in datas 形式的特殊语法, datas 是源数据数组并且 data 是数组元素迭代的别名.
范例:
- <div id="app">
- <ol>
- <li v-for="data in datas">
- {{ data.name }}
- </li>
- </ol>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- datas: [
- { name: 'test' },
- { name: 'test2' },
- { name: 'test3' }
- ]
- }
- })
- </script>
执行结果:
使用 v-for 迭代显示一个完整的对象(包括 index,key 和 value):
- <div id="app">
- <ul>
- <li v-for="(value, key, index) in object">
- {{ index }}. {{ key }} : {{ value }}
- </li>
- </ul>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- object: {
- name: 'Jimmy',
- sex: 'male',
- age: 16
- }
- }
- })
- </script>
执行结果:
其中, index 是索引, key 是键值, value 是值内容.
来源: https://www.cnblogs.com/JHelius/p/11684203.html