Program:
index.html:
index.js:
Output:
index.html:
<!DOCTYPE html>
<html>
<body>
<div id="ad">
<h1> <b> Students:</b> </h1>
<p v-for="i in student">
{{ i }}
</p>
<br><br>
<h1> <b> Players:</b> </h1>
<p v-for="i in players">
{{ i.name }} {{i.score}}
</p>
</div>
<div style="margin-top:500px;"></div>
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="./index.js"> </script>
</body>
</html>
index.js:
var app = new Vue({
el: '#ad',
data: {
student: ['John', 'Rob', 'Jim', 'Ryan'],
players: [{
name: 'Joe',
score: 5
},
{
name: 'T',
score: 8
},
{
name: 'LE',
score: 3
},
{
name: 'Ten',
score: 7
},
]
},
});
Output:
