相信大家看了我的前面两次博客关于Vue.js相关的讲解之后,应该对Vue.js了解了一些基础知识了。本次将会继续讲解Vue.js常用的指令v-for,v-if和v-show。
v-for
我们用 v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用 item in items形式的特殊语法,item是源数据数组并且item是数组元素迭代的别名。
接下来我们上一段代码进行详细的介绍,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for的使用</title>
<script src="vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
<!-- v-for遍历循环普通数组 -->
<p v-for="item in list">{
{ item }}</p>
<!-- 可以索引数组下标 -->
<p v-for="(item,i) in list">索引值:{
{ i }}--->每一项:{
{ item }}</p>
<!-- v-for遍历循环对象数组 -->
<p v-for="user in list2">编号:{
{ user.id }}--->姓名:{
{ user.name }}</p>
<!-- v-for在遍历对象的键值对时,除了value,key外,第三个位置还有index -->
<p v-for="(value,key) in user">值:{
{ value }}--->键:{
{ key }}</p>
<!-- v-for迭代数字,count值从1开始 -->
<p v-fo