Vue的条件判断和循环遍历
个人博客
Vue系列
上一篇:04-v-on的使用
下一篇:06-v-model的使用
条件判断
v-if的使用
v-if的使用非常简单,首先,我们来看一下下面这段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-if="false">你好啊</h1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {},
});
</script>
</html>
在h1标签中添加v-if属性,并置它的值为false,这时候的运行结果如下:
浏览器并没有显示h1标签的内容,现在我们更改一下v-if对应的值,改为true
<div id="app">
<h1 v-if="true">你好啊</h1>
</div>
运行结果如下:
当v-if为true时,该标签显示,当v-if为false时,该标签不显示。
我们来看下面这个小例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-if="isShow">你好啊</h1>
<button @click="btnClick">切换</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
isShow: false,
},
methods: {
btnClick() {
console.log(this.isShow);
this.isShow = !this.isShow;
},
},
});
</script>
</html>
这里,我们将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的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-if="score>=90">优秀</h1>
<h1 v-else-if="score>=80">中等</h1>
<h1 v-else-if="score>=70">良好</h1>
<h1 v-else-if="score>=60">及格</h1>
<h1 v-else>不及格</h1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
score: 90,
},
});
</script>
</html>
v-else的使用也很简单,因此,下面直接给出例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-if="false">true显示</h1>
<h1 v-else>false显示</h1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
});
</script>
</html>
v-show的使用
v-show的使用类似于v-if,都是true时显示,false隐藏,如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<div v-show="false">{{message}}</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好!",
},
});
</script>
</html>
div标签不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<div v-show="true">{{message}}</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好!",
},
});
</script>
</html>
div标签显示
v-if和v-show的区别
v-show和v-if的区别在于v-show只是让元素的display属性变为none,如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-if="false">你好啊</h1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
isShow: false,
},
});
</script>
</html>
v-if为false时,div中并没有该元素!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-show="false">你好啊</h1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
isShow: false,
},
});
</script>
</html>
v-show为false时,div标签中有h1标签,但display为none,即隐藏
循环遍历
v-for遍历数组
如果想将一个数组的全部数据渲染在界面上,我们可以用v-for。我们来看下面这个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
names: ["java", "c++", "js", "vue"],
},
methods: {
btnClick: function (index) {
console.log(index);
},
},
});
</script>
</html>
这段代码中,data里有一个数组names:
const app = new Vue({
el: "#app",
data: {
names: ["java", "c++", "js", "vue"],
},
methods: {
btnClick: function (index) {
console.log(index);
},
},
});
我们想将names中的数据渲染到界面上,这里我们使用v-for标签,可以将数组中的数据渲染到界面上
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
运行结果如下:
我们可以通过以下代码,来获得数组索引
<ul>
<li v-for="(item,index) in names">{{item}}</li>
</ul>
通过使用(item,index)来获得数组索引。下面我们用下面这段代码来演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in names" @click="btnClick(index)">{{item}}</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
names: ["java", "c++", "js", "vue"],
},
methods: {
btnClick: function (index) {
console.log(index);
},
},
});
</script>
</html>
这里首先我们用v-for来渲染li标签,然后为每个li标签分别添加点击事件,为点击事件的接收函数传入index。运行结果:
右侧控制台打印的,就是一次从上到下点击列表后打印出来的索引值。
v-for遍历对象
当要遍历的是一个集合时,我们依旧可以用v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
info: {
name: "wangyuyong",
age: 18,
sex: "男",
},
},
});
</script>
</html>
运行结果如下:
我们可以使用(item,key)来获得key值,如下:
<ul>
<li v-for="(item,key) in info">{{key}}->{{item}}</li>
</ul>
运行结果
v-for遍历对象数组
如果数组中的元素是对象,依旧可以使用v-for来遍历,用法和遍历数组相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in infos">{{item.name}}</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
infos: [
{
name: "wangyuyong",
age: 18,
},
{
name: "wyy",
age: 18,
},
{
name: "cgl",
age: 18,
},
{
name: "xzr",
age: 18,
},
],
},
});
const infos = [
{
name: "wangyuyong",
age: 18,
},
{
name: "wyy",
age: 18,
},
{
name: "cgl",
age: 18,
},
{
name: "xzr",
age: 18,
},
];
for (let info in infos) {
console.log(info);
}
</script>
</html>
运行结果如下:
注意事项
- v-for使用过程最好为元素添加key,且key值与元素是一一对应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li class="li" v-for="item in language" :key="item">{{item}}</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
language: ["c", "c++", "python", "java"],
},
});
</script>
</html>
- 数组的响应方法
- push
- pop
- unshift
- shift
- splice
只有通过以上方法为数组增加或修改元素时,界面才是响应式的
这里我们改变了数组第一个元素的值,但界面并没有发生变化。
我们通过splice修改第一个元素,界面才会发生响应式更新。