Question

我想在不使用数组索引的情况下显示数组中的多个数据，但我希望它每次都以相同的格式自动显示数据而不使用li＆amp;表。

我的代码：

<!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>

现在我正在使用数组索引打印出数组的值。显示多个值的最简单方法是什么？

感谢。

Answer 1

<!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'而不是class。

由于我已经习惯了这种迭代的javascript对象格式，我将你的数组转换为javascript对象。

您可以从Vue的官方文档中进一步查看。 https://vuejs.org/v2/guide/list.html

如何简化VueJS的这段代码

1 个答案: