原

vue.js 学习日记第五章-v-if和v-for指令的使用方式

5002人阅读 2019/5/30 11:14 总访问：82611 评论：2 收藏：0 手机

分类: vue.js

官网：https://cn.vuejs.org/v2/guide/

vue.js学习日记第四章： http://www.tnblog.net/18323015640/article/details/2452

这一章我们学习一下vue中v-if和v-for指令的使用方式

v-if:我们先定义两个属性：error和success，默认为false

new Vue({
el: "#vue-if",
data: {
error: false,
success: false
}
});

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset=utf-8" />
<title>vue.js</title>
<!--引用vue的cdn-->
<script src="https://unpkg.com/vue"></script>
<!--引用自定义的css文件-->
<link rel="stylesheet" href="style.css">
</head>

<body>
<!--v-if和v-for指令-->
<div id="vue-if">
<!--定义两个按钮，分别执行error和success改变值-->
<button v-on:click="error=!error">show error</button>
<button v-on:click="success=!success">show success</button>
<!--判断error是true还是false-->
<p v-if="error">我是最帅的</p>
<!--判断success是true还是false-->
<p v-if="success">你是最丑的</p>
</div>
<!--引用编写vue代码的js-->
<script src="app.js"></script>
</body>

</html>

运行效果：当我们没点击按钮时，可以看到由于error和success默认为false，P标签没有展示出来

现在我们点击一下show error按钮：我是最帅的p标签就展示出来了

当我们再次点击show error按钮的时候，我是最帅的p标签就会消失，同理success也是一样的效果。

else if 也是相同的用法，大家可以尝试一下......

--------------------------------------------------------------------------------------------------------------

v-for:这里常用的几种写法都总结勒一下，想看运行效果的话自己去尝试吧：

首先，定义我们需要循环的数组：

new Vue({
el: "#vue-for",
data: {
countryArray: ["China", "America", "Japan"],
userArray: [{
name: "huangdaye",
age: "23"
}, {
name: "傻征",
age: "23"
}, {
name: "傻斌",
age: "23"
}]
}
});

然后，根据需求使用不同方式的for循环写法：

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset=utf-8" />
<title>vue.js</title>
<!--引用vue的cdn-->
<script src="https://unpkg.com/vue"></script>
<!--引用自定义的css文件-->
<link rel="stylesheet" href="style.css">
</head>

<body>
<!--v-if和v-for指令-->
<div id="vue-for">
<!--第一种：遍历普通的数组-->
<ul>
<li v-for="country in countryArray">
国家：{{ country }}
</li>
</ul>
<!--第二种：遍历对象数组-->
<ul>
<li v-for="user in userArray">
name:{{ user.name }},age:{{ user.age }}
</li>
</ul>
<!--第三种：遍历对象数组并拿到下标-->
<ul>
<li v-for="(user,index) in userArray">
{{ index }} . name:{{ user.name }},age:{{ user.age }}
</li>
</ul>
<!--第四种：遍历对象的属性取到key和value-->
<template v-for="user in userArray">
<ul>
<li v-for="(val,key) in user">
{{ key }},{{ val }}
</li>
</ul>
</template>
</div>
<!--引用编写vue代码的js-->
<script src="app.js"></script>
</body>

</html>