tnblog
首页
视频
资源
登录

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

4232人阅读 2019/5/30 11:14 总访问:69327 评论: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>

            好了,v-if 和 v-for 的用法就简单学习到这里了.....

评价
a genius is the person who repeats the most times
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术