我想在不使用数组索引的情况下显示数组中的多个数据，但我希望它每次都以相同的格式自动显示数据而不使用 li 和表。
我的代码:
<!DOCTYPE html>
<html>
<head>
<title>VueJS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="root">
<center>
<h1> {{names[0]}} </h1> <p> By <b>{{authors[0]}}</b> </p>
<p><b>{{dates[0]}}</b> in <b>{{language}}</b></p><hr>
<h1> {{names[1]}} </h1> <p> By <b>{{authors[1]}}</b> </p>
<p><b>{{dates[1]}}</b> in <b>{{language}}</b></p><hr>
<p>Update Any Changes You Want.</p>
<input type="text" id="text" v-model="names[0]"></input>
<input type="text" id="text" v-model="authors[0]"></input>
<input type="text" id="text" v-model="dates[0]"></input>
<input type="text" id="text" v-model="language"></input> </br> </br>
<input type="text" id="text" v-model="names[1]"></input>
<input type="text" id="text" v-model="authors[1]"></input>
<input type="text" id="text" v-model="dates[1]"></input>
<input type="text" id="text" v-model="language"></input></center><hr>
</div>
<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<script>
new Vue ({
el: '.root',
data: book =
{
names: ['Hamlet', 'A Boys Will'],
authors: ['William Shakespeare', 'Robert Frost'],
dates: ['1609', '1913'],
language: 'English'
}
})
</script>
</body>
</html>现在我正在使用数组索引打印出数组的值。 显示多个值的最简单方法是什么？
谢谢。
最佳答案
<!DOCTYPE html>
<html>
<head>
<title>VueJS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="root">
<div class="text-center" v-for="book in books">
<h1> {{ book.name }} </h1>
<p> By <b>{{ book.author }}</b> </p>
<p><b>{{ book.date }}</b> in <b>{{ book.language }}</b></p>
<input type="text" v-model="book.name">
<input type="text" v-model="book.author">
<input type="text" v-model="book.date">
<input type="text" v-model="book.language">
<hr>
</div>
<p>Update Any Changes You Want.</p>
</div>
<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<script>
new Vue({
el:'#root',
data: {
books: [
{
name: 'Hamlet',
author: 'William Shakespeare',
date: '1609',
language: 'English'
},
{
name: 'A Boys Will',
author: 'Robert Frost',
date: '1913',
language: 'English'
}
]
}
})
</script>
</body>
</html>您可以在模板中使用“v-for”迭代器来根据需要迭代数组项或对象，而不仅仅是列表或表格。我建议您为根元素使用 id，例如“#root”，而不是类。
因为我习惯了这种迭代的 javascript 对象格式，所以我将您的数组转换为 javascript 对象。
你可以进一步查看Vue的官方文档。 https://v2.vuejs.org/v2/guide/list.html
关于javascript - 如何简化 VueJS 的这段代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46717878/