7. List loop rendering

Render the array using V-for

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!".list: ["Brother Liu Bei"."Second brother Guan Yu"."Third brother Zhang Fei"."The fourth brother Zhao Yun"]}},// We can use item in list or item of list
    template: ` 
       

         {{ item }} -- {{ index }} 
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Render objects using V-for

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!".object: {
          one: "Brother Liu Bei".two: "Second brother Guan Yu".three: "Third brother Zhang Fei".four: "The fourth brother Zhao Yun"}}},// We can use item in list or item of list
    template: ` 
       

         {{ key }} -- {{ value }} -- {{ index }} 
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Optimize performance with keys

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!".list: [1.2.3.4]}},methods: {
      addItem(){
        this.list.push(1000); }},// We can use item in list or item of list
    // When we add new elements, vue intelligently decides what to render (create)
    // Unchanged content is not rendered, reusing the original, newly added content is rendered
    // However, not all the time vUE can accurately determine whether an element is new or not
    // We need to use :key to bind a "unique" value to help vue determine
    // If you have the same value, reuse the previous DOM and create a new one
    // This key is usually not indexed, because each element has a different index
    // The value of vue is equal to the value of vue.
    template: ` 
       

         {{ item }} -- {{ index }} 
       
  `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Control array

In addition, we can control the rendering of the list by controlling the array, which is omitted here;

Add attributes to an object

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!".object: {
          one: "Brother Liu Bei".two: "Second brother Guan Yu".three: "Third brother Zhang Fei".four: "The fourth brother Zhao Yun"}}},methods: {
      addAttrs(){
        this.object.five = Plato;
        this.object.six = Socrates;
        this.object.seven = "Aristotle"; }},// We can use item in list or item of list
    template: ` 
       

         {{ key }} -- {{ value }} -- {{ index }} 
       
  `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Cycle n times

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"}},// We can use item in list or item of list
    template: ` 
       

         {{message}} 
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Specifies that an element is not displayed

It can be used flexibly, but do not download v-for and V-if in the same tag, V-for has higher permissions!

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"}},// We can use item in list or item of list
    template: ` 
       
 
        

         {{item}}
        
 
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

There is a problem

Solve the problem: Use template

Use template instead of div, template is just a placeholder!

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"}},// We can use item in list or item of list
    template: ` 
        `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results