Vue的条件判断和循环遍历
Vue的条件判断和循环遍历
个人博客
https://www.boycharse.top
Vue系列
上一篇：04-v-on的使用
下一篇：06-v-model的使用
条件判断
v-if的使用
v-if的使用非常简单，首先，我们来看一下下面这段代码
Document
你好啊
在h1标签中添加v-if属性，并置它的值为false，这时候的运行结果如下：
浏览器并没有显示h1标签的内容，现在我们更改一下v-if对应的值，改为true
你好啊
运行结果如下：
当v-if为true时，该标签显示，当v-if为false时，该标签不显示。
我们来看下面这个小例子：
Document
你好啊
这里，我们将v-if的值设置为isShow，然后给button设置一个点击事件，当button被点击时，将isShow的值取反，这样子就可显示点击按钮时，让h1标签的内容一会展示一会隐藏。
结果分析：
此时isShow为false，所以h1标签不显示
点击按钮后，isShow为true，h1标签显示。
再次点击按钮,isShow又变为false，h1标签隐藏
v-else-if和v-else的使用
v-else-if的使用也非常简单，简单来理解，这里无论是v-if，v-else-if,v-else就如同js中的添加判断结构一样。
下面给出v-else-if的例子：
Document
优秀
中等
良好
及格
不及格
v-else的使用也很简单，因此，下面直接给出例子：
Document
true显示
false显示
v-show的使用
v-show的使用类似于v-if，都是true时显示，false隐藏，如下代码：
Document
{{message}}
div标签不显示
Document
{{message}}
div标签显示
v-if和v-show的区别
v-show和v-if的区别在于v-show只是让元素的display属性变为none，如下所示：
Document
你好啊
v-if为false时，div中并没有该元素！
Document
你好啊
v-show为false时，div标签中有h1标签，但display为none，即隐藏
循环遍历
v-for遍历数组
如果想将一个数组的全部数据渲染在界面上，我们可以用v-for。我们来看下面这个例子：
Document
- {{item}}
这段代码中，data里有一个数组names:
const app = new Vue({
el: "#app",
data: {
names: ["java", "c++", "js", "vue"],
},
methods: {
btnClick: function (index) {
console.log(index);
},
},
});
我们想将names中的数据渲染到界面上，这里我们使用v-for标签，可以将数组中的数据渲染到界面上
- {{item}}
运行结果如下：
我们可以通过以下代码，来获得数组索引
- {{item}}
通过使用(item,index)来获得数组索引。下面我们用下面这段代码来演示：
Document
- {{item}}
这里首先我们用v-for来渲染li标签，然后为每个li标签分别添加点击事件，为点击事件的接收函数传入index。运行结果：
右侧控制台打印的，就是一次从上到下点击列表后打印出来的索引值。
v-for遍历对象
当要遍历的是一个集合时，我们依旧可以用v-for
Document
- {{item}}
运行结果如下：
我们可以使用(item,key)来获得key值，如下：
- {{key}}->{{item}}
运行结果
v-for遍历对象数组
如果数组中的元素是对象，依旧可以使用v-for来遍历，用法和遍历数组相同
Document
- {{item.name}}
运行结果如下：
注意事项
- v-for使用过程最好为元素添加key，且key值与元素是一一对应
Document
- {{item}}
- 数组的响应方法
- push
- pop
- unshift
- shift
- splice
只有通过以上方法为数组增加或修改元素时，界面才是响应式的
这里我们改变了数组第一个元素的值，但界面并没有发生变化。
我们通过splice修改第一个元素，界面才会发生响应式更新。