vue v-for遍歷多種使用方式
小編:管理員 37閱讀 2022.08.18
(1)v-for遍歷數組獲取數組的item對象的value
采用v-for對數組進行遍歷
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!DOCTYPE html>
<head>
<title>test</title>
<script
type="text/javascript"
src="../../node_modules/vue/dist/vue.js"
></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
names: ["james", "curry", "lotus"],
},
methods: {},
});
</script>
<style></style>
</body>
復制(2)v-for遍歷數組獲取數組的item和key
<ul>
<li v-for="(item,key) in names">
<a>item是{{item}}</a>
<a>key是{{key}}</a>
</li>
</ul>
<!DOCTYPE html>
<head>
<title>test</title>
<script
type="text/javascript"
src="../../node_modules/vue/dist/vue.js"
></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,key) in names">
<a>item是{{item}}</a>
<a>key是{{key}}</a>
</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
names: [{"Letter":"A"}, {"Letter":"B"}, {"Letter":"C"}],
},
methods: {},
});
</script>
<style></style>
</body>
復制(3)對象遍歷，v-for也可以對單個對象進行遍歷
<ul>
<li v-for="(item,key,index) in names">
<a>item是{{item}}</a>
<a>key是{{key}}</a>
<a>index是{{index}}</a>
</li>
</ul>
<!DOCTYPE html>
<head>
<title>test</title>
<script
type="text/javascript"
src="../../node_modules/vue/dist/vue.js"
></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,key,index) in names">
<a>item是{{item}}</a>
<a>key是{{key}}</a>
<a>index是{{index}}</a>
</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
names: {"LetterA":"A","LetterB":"B","LetterC":"C"},
},
methods: {},
});
</script>
<style></style>
</body>
復制
相關推薦
- 【Vue.js】900- Vue 3.0 進階之 VNode 探秘 本文是 Vue 3.0 進階系列 的第五篇文章，在這篇文章中，將介紹 Vue 3 中的核心對象 ——VNode，該對象用于描述節點的信息，它的全稱是虛擬節點（virtual node）。與 “虛擬節點” 相關聯的另一個概念是 “虛擬 DOM”，它是我們對由 Vue 組件樹建立起來的整個 V…
- Spring學習——Spring常用數據庫訪問設置 一：配置屬性文件 jdbc.properties 1.Sql server 驅動程序類名：com.microsoft.sqlserver.jdbc.SQLServerDriver 數據庫URL格式： jdbc:sqlserver://[serverName[\instanceName][:portNumber]][;property=value[;property=value]]sqlserver.driverClassName=com…
粵公網安備 44010402000066號