条件与循环语句
引言
在前端开发之中, 灵活的控制渲染是很有必要的，快速构建也是很有必要的，条件渲染和循环渲染，在视图构建中起着重要作用.
条件语句
v-if
v-if 指令用于条件性地渲染内容
此内容只会在指令的表达式返回除了 false，0，""，null，undefined 和 NaN 外的值的时候被渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <h1 v-if="display"> Blog: uiuing.com </h1> </div> <script> let vm = new Vue({ el: "#app", data: { display: true }, }) </script> </body> </html>
display等于true
display等于false
当然还有 v-else-if, 此处不做演示, 和平常的高级语言相同
v-else
这和高级语言里的判断语句else是一样的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if & v-else</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <h1 v-if="display"> Blog: uiuing.com </h1> <h1 v-else> uiuing </h1> </div> <script> let vm = new Vue({ el: "#app", data: { display: true }, }) </script> </body> </html>
v-show
效果和v-if相同
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <h1 v-show="display"> Blog: uiuing.com </h1> </div> <script> let vm = new Vue({ el: "#app", data: { display: true }, }) </script> </body> </html>
不再展示效果了, 同上
v-if 和 v-show
v-if 会牵涉到虚拟 DOM diff 算法，有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
但是需要提醒很重要的一点是：v-show类似css的display，而v-if 才是标准的条件判断语句
循环语句
循环语句可以节省DOM操作的工作量, 将一些重复但又具备相同特质的内容渲染
v-for之数组
语法与python类似
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="navItem in nav"> {{ navItem }} </li> </ul> </div> <script> let vm = new Vue({ el: "#app", data: { nav: [1, 2, 3, 4, 5, 6] }, }) </script> </body> </html>
v-for之对象
如果你对对象的概念很模糊的话, 你可以参考下面的字典
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="navItem in nav"> {{ navItem }} </li> </ul> </div> <script> let vm = new Vue({ el: "#app", data: { nav: { one: 1, two: 2, three: 3 } }, }) </script> </body> </html>
你还可以这样
<li v-for="(navItem,index) in nav">
字典显示key，数组显示位置下标
注意 ！
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除，直接进行添加修改数据，这样操作是不会构成响应式，不会触发视图更新。必须使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性
Vue.set(vm.nav,'one', '4');
所以，使用对象方法时，要想触发视图更新，常常需要使用 Vue.set()去操作。
key属性
为了重用和重新排序现有元素，你可以给每项提供一个唯一 key 属性
理想的 key 值是每项都有的唯一 id, 这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：
<div v-for="item in items" :key="item.id"> </div>
注意： key 不与 v-for 特别关联，建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意
检测数据更新
方法
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
以上方法，会直接改变原始数组称为变异方法，使视图自动更新
替换数组
学了 JavaScript 标准对象库，都知道有些数组方法是不直接改变原数组的，这里称他们为非变异方法，例如：filter()、slice()、concat()，他们都是返回一个新数组
在 Vue 中使用到这些方法，我们必须使用数组替换法，将非变异方法返回的新数组直接赋值给的旧数组
this.nav = this.nav.slice(1, 4);
注意
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
- 利用索引直接设置
- 修改数组的长度
直接这样改值操作是没有问题的，但是不是响应式的，并不能触发视图更新
例如这样的操作 app.items[indexOfItem] = newValue ，可以用以下两种代替
// Vue.set Vue.set(vm.items, indexOfItem, newValue); // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue);
显示过滤
显示一个数组的过滤或排序副本，可以创建返回过滤或排序数组的计算属性, 使用computed 实现
案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js"></script> </head> <body> <div id="app"> <ul> <li v-for="num in evenNumber" > {{ num }} </li> </ul> </div> <script> let app = { data() { return { numberArray: [1, 2, 3, 4, 5, 6, 7, 8], }; }, computed: { evenNumber: function () { return this.numberArray.filter(num => { return num % 2 === 0; }); }, }, }; Vue.createApp(app).mount("#app"); </script> </body> </html>
