Vue入门基础（for 指令）
for.htmljavascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="vue-app-for">
<h1>for 指令 直接引用</h1>
<!--直接引用-->
{{arrays[0]}}
{{arrays[1]}}
{{arrays[2]}}
{{arrays[3]}}
{{arrays[4]}}
<h1>for 指令 遍历数组</h1>
<ul>
<!-- for each 遍历数组-->
<li v-for="obj in arrays">
{{obj}}
</li>
</ul>
<ul>
<!-- for each 遍历数组-->
<li v-for="obj in arrays">
{{obj}}
</li>
</ul>
<ul>
<!-- for each 遍历数组 带下标-->
<li v-for="(obj,index) in arrays">
{{index}} {{obj}}
</li>
</ul>
<h1>for 指令 遍历对象数组</h1>
<ul>
<!-- for each 遍历数组-->
<li v-for="(obj,index) in users">
{{index}} {{obj.name}} {{obj.age}}
</li>
</ul>
<!--template 能够做为容器标签 不会渲染到dom中-->
<template v-for="(obj,index) in users">
<h3> {{index}} {{obj.name}}</h3>
<p>{{obj.age}}</p>
</template>
<h1>for 指令 遍历对象</h1>
<!--template 能够做为容器标签 不会渲染到dom中-->
<template v-for="(user,index) in users">
<div v-for="(val,key) in user">
<p>{{key}} -{{val}}</p>
</div>
</template>
</div>
</body>
<script src="for.js">
</script>
</html>
for.jshtml
new Vue({
el: '#vue-app-for',
data() {
return {
arrays: ['孙悟空', '猪八戒', '沙悟净', '白龙马', '唐三藏'],
users: [
{ name: '孙悟空', age: '500' },
{ name: '猪八戒', age: '400' },
{ name: '沙悟净', age: '300' },
{ name: '白龙马', age: '200' },
{ name: '唐三藏', age: '20' }
]
}
},
methods: {
},
computed: { //computerd里的方法都须要return值
}
});
页面效果vue
相关文章
- 1. Vue入门基础（if 和 show 指令）
- 2. vue指令入门
- 3. Vue基础指令
- 4. VUE基础入门
- 5. Vue基础-Vue入门
- 6. linux入门基础指令简介
- 7. Git入门（一） ---- 基础指令
- 8. Vue入门基础
- 9. Vue基础语法指令
- 10. Vue基础指令集锦
- 更多相关文章...
- • Memcached入门教程 - NoSQL教程
- • R 语言基础 - R 语言教程
- • YAML 入门教程
- • Docker 清理命令
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Vue入门基础（if 和 show 指令）
- 2. vue指令入门
- 3. Vue基础指令
- 4. VUE基础入门
- 5. Vue基础-Vue入门
- 6. linux入门基础指令简介
- 7. Git入门（一） ---- 基础指令
- 8. Vue入门基础
- 9. Vue基础语法指令
- 10. Vue基础指令集锦