条件与循环语句
引言
在前端开发之中, 灵活的控制渲染是很有必要的，快速构建也是很有必要的，条件渲染和循环渲染，在视图构建中起着重要作用.
条件语句
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>
