Vue.js (2) Learn list binding: V-for
We can also understand the loop binding code as follows:
<! DOCTYPEhtml>
<html>
<head>
<meta name="viewport" content="Initial - scale = 1.0, the maximum - scale = 1, the user - scalable = no">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test1">
<span v-for="todo in todos">
{{ todo.text }}
<br />
</span>
</div>
</body>
</html>
<script>
var test1 = new Vue({
el: '#test1'.data: {
todos: [{text: 'I'm number one on the list.' },
{ text: 'I'm number two on the list.' },
{ text: 'I'm number three on the list.'}]}})</script>
Copy the codeThe effect is as follows:
If you need to modify the data, you can modify the data directly. Test1. todos = [{text: ‘I am the first in the list’}, {text: ‘I am the second in the list’}, {text: ‘I am the third in the list’}, {text: ‘I am the third in the list’}, {text: ‘I am the fourth in the list’}] that will become list 4.
The code is as follows:
<! DOCTYPE HTML > < HTML > <head> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="test1"> <span v-for="todo in todos"> {{ todo.text }} <br /> </span> </div> </body> </html> <script> var test1 = new Vue({ el: '#test1', data: Todos: [{text: 'I am the first in the list'}, {text: 'I am the second in the list'}, {text: Todos = [{text: 'I am the first in the list'}]}}) setTimeout(() => {test1.todos = [{text: 'I am the first in the list'}, {text: 'I am the second in the list'}, {text: 'I am the third in the list'}, {text: 'I am the fourth in the list'}]}, 2000); </script>Copy the codeCopy and paste, open the page to see the effect ~