vue学习 八 v-if和v-for的使用
vue学习 八 v-if和v-for的使用
meihuasheng
发布于 2021-03-16 21:38:09
发布于 2021-03-16 21:38:09
个人理解：
v-if：正如if一样，就是判断为真为假，然后看情况输出相应结果；
v-else：跟在v-if后面，如果什么不成立，就运行else后面的命令；
v-else-if：就像选择一样，如果一个变量等于A，执行A下面的命令，如果等于B，则执行B下面的命令；
v-show: 和v-if的结果是一样的，用法也一样
<h1 v-show="error">Hello!</h1>不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
template元素的使用：
就像一个标签一样，用来加上v-if什么的，然后页面里不会显示出这个东西，就如上图中圈出来的地方一样，只会显示出其中的内容，使用方法如下；
<template v-if="bianliang"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
v-for的使用： 就是用来循环输出数组的元素的
<!-- 用数组下标显示数组元素 -->
<div>
{{country[0]}}
{{country[1]}}
{{country[2]}}
</div>
<!--遍历数组-->
<ul>
<li v-for="countrys in country">
{{countrys}}
</li>
</ul>
<ul>
<li v-for="(user,index) in users">
{{index+1}} .. {{user.name}}----{{user.age}}
</li>
</ul>
data: { //用于数据的存储
error:false,
success:true,
country:["shanghai","guangdong","gnazhou"],
users:[
{name:"zhangsan",age:20},
{name:"lisi",age:21},
{name:"liusongjing",age:22}
]
},v-for=“（user，index） in users”
users表示的是数组 user表示的一个代号而已，可以是任意，index是为了显示数组下标从0开始
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录