指令 (Directives) 是带有 v-
前缀的特殊特性。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
v-if 指令是vue的条件控制语句
v-for 指令是vue的循环语句
【app.js】
new Vue({
el: "#vue-app",
data: {
arrs: ["Maria", "Lucy", "Mike"],
users: [
{ name: "buding", age: "20" },
{ name: "zhou", age: "10" },
{ name: "Blanck", age: "13" },
{ name: "Winner", age: "26" },
]
},
methods: {
},
computed: {
}
});
【index.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app是根容器元素 -->
<div id="vue-app">
<!-- 数组下标 -->
{{arrs[0]}}
{{arrs[1]}}
{{arrs[2]}}
<!-- 数组遍历 -->
<ul>
<li v-for="arr in arrs">{{arr}}</li>
</ul>
<!-- 对象遍历 -->
<ul>
<li v-for="(user,index) in users">
<p v-if="user.age>=18">{{index+1}}.{{user.name}}-{{user.age}}-成年人</p>
<p v-else>{{index+1}}.{{user.name}}-{{user.age}}-未成年</p>
</li>
</ul>
<template>
<div v-for="user in users">
<div v-for="(val,key) in user">
{{key}}-{{val}}
</div>
</div>
</template>
</div>
<script src="app.js"></script>
</body>
</html>