vue指令
v-开头。 {{}}
1 v-text == {{}} 渲染普通文本
2 v-html 渲染富文本 代表前端文本就是富文本
容易造成注入攻击
3 v-for="" 遍历
语法。v-for="(item,i) in list" v-for="(item,i) of list"
1 list 可为数组 可以数字 字符串 对象
item 表示元素值 可以改名
i 表示下标 可以改名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03 循环 </title>
<script src="../libs/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" width="100%">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>手机</td>
<td>是否毕业</td>
<td>朋友</td>
</tr>
<tr v-for="(item,i) in userInfo">
<td>{{i+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.phone}}</td>
<td>{{item.isFinish?'已经毕业':"未毕业"}}</td>
<td>
<ul>
<li v-for="friend in item.friends">
{{friend.name}}
</li>
</ul>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#app",
data: {
list: ["html", "css", "javascript", "vue"],
userInfo: [
{
name: "章三",
age: 20,
phone: "18911670519",
id: 1,
isFinish: false,
friends: [
{
name: "范冰冰"
},
{
name: "李冰冰"
}
]
},
{
name: "里斯",
age: 21,
phone: "18911670512",
id: 2,
isFinish: false,
friends: [
{
name: "肖战"
},
{
name: "王一博"
}
]
},
{
name: "班班",
age: 18,
phone: "18911670510",
id: 3,
isFinish: true,
friends: [
{
name: "赵四"
},
{
name: "刘能"
}
]
}
]
}
})
</script>
</body>
</html>
