Vue list display

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<! -- Use subscript to facilitate the output of data -->
<! -- <ul>-->
<! -- <li>{{movies[0]}}</li>-->
<! -- <li>{{movies[1]}}</li>-->
<! -- <li>{{movies[2]}}</li>-->
<! -- <li>{{movies[3]}}</li>-->
<! -- </ul>-->

<! -- Use v-for to iterate -->
  <ul>
    <li v-for="item in movies">{{item}}</li>
  </ul>
</div>

<script src=".. /vue.js"></script>
<script>
  const app = new Vue({
    el:"#app".data: {message:"hello vue".movies: [One Piece.Naruto.Dragon Ball."Oolong Courtyard"."The old master"],}})</script>
</body>
</html>
Copy the code
  • Now, let’s show a more complicated statistic:Data list.
    • Let’s say we now request a list from the server
    • I want to display it in HTML.
  • In HTML code, use the V-for directive 
    • <li v-for="item in movies">{{item}}</li>
Copy the code
    • We’ll explain this later, but learn how to use it first.
  • So Easy, we no longer need to do DOM concatenation in JavaScript code
  • And, more importantly, it’s responsive.
    • That is, when the data in our array changes, the interface automatically changes.
    • Again, let’s go to Console in developer mode and try it out