Vue-js 零基础国外案例 DEMO 全课程讲解 2 我是---- 静静-优快云博客

本文深入探讨Vue.js中使用v-if和v-show进行条件渲染的技术细节，对比两者在资源消耗上的差异。同时，介绍了如何利用v-for指令高效地渲染列表和对象数据，包括索引追踪、对象遍历及动态元素更新。

Module Introduction 模块介绍

conditionals & lists 条件语句与列表

Conditional Rendering with v-if 使用v-if进行条件渲染

   <body>
    <div id="app">
      <p v-if="show">you can see me! 你可以看到我 <span>hello</span></p>
      <p v-else>Now you see me! 现在你看到了我！</p>
      <p>Do you also see me 你也看见我了</p>
      <button @click="show = !show">switch 开关</button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        show: true
      }
    });
  </script>
这里如果单存的使用 v-if 我们会发现单纯的使用v-if 是整个节点的移除，当下面我们给使用v-else 时候进行切换 --- 我是静静 
复制代码

Using an Alternative v-if Syntax 使用替代v-if 的语法

<body>
    <div id="app">
      <p v-if="show">you can see me! 你可以看到我 <span>hello</span></p>
      <p v-else>Now you see me! 现在你看到了我！</p>
      <template>
        <h1>heading 标题</h1>
        <p v-if="show">inside a template 在模板内</p>
      </template>
      <p>Do you also see me 你也看见我了</p>
      <button @click="show = !show">switch 开关</button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        show: true
      }
    });
  </script>
上面我们使用template 模板进行替换，也就是把以前的div变成了template 然后在里面 写了 v-if
复制代码

Dont Detach it with v-show 不要用v-show分离它

  <body>
    <div id="app">
      <p v-if="show">you can see me! 你可以看到我 <span>hello</span></p>
      <p v-else>Now you see me! 现在你看到了我！</p>
      <template v-if="show">
        <h1>heading 标题</h1>
        <p>inside a template 在模板内</p>
      </template>
      <p v-show="show">Do you also see me 你也看见我了</p>
      <button @click="show = !show">switch 开关</button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        show: true
      }
    });
  </script>
这里我给大家标注了一下会看到这里显示了display：none 是把元素隐藏了，当我们想要对一个DOM 进行频繁操作的时候，这时候我们就需要使用 v-show 因为使用v-if
进行的消耗资源会更加巨大。
复制代码

Rendering Lists with v-for 使用v-for渲染列表

<body>
    <div id="app">
      <ul>
        <!-- 这里使用v-for 之后 前面是 元素名 后面是 data数据名 然后在渲染的时候 需要给 元素名 -->
        <li v-for=" ingredient in ingredients">{{ ingredient }}</li>
        <hr />
        <!-- 这里我们 使用v-for 循环之后，在里面添加一个括号 给一个索引 i 然后 拿到 索引下标 -->
        <li v-for="(ingredient,i) in ingredients">
          {{ ingredient }},({{ i }})
        </li>
      </ul>
      <hr />
      <template v-for="(ingredient,index) in ingredients">
        <h1>{{ ingredient }}</h1>
        <p>{{ index }}</p>
      </template>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        ingredients: ["meat", "fruit", "cookies"],
        person: [
          { name: "vue", age: 28, color: "red" },
          { name: "js", age: 18, color: "blue" }
        ]
      }
    });
  </script>
上面我们 使用v-for循环 获得到data中的数据，然后我们分别拿到 项目名与索引下标 从零开始的。
复制代码

Looping through Objects 循环通过对象

  <body>
    <div id="app">
      <ul>
        <!-- <li v-for="item in person">{{ item.name }}</li> -->
        <li v-for="item in person">
          <div v-for="(value,key,index) in item">
            {{ key }}----{{ value }} ---{{ index }}
          </div>
        </li>
      </ul>
      
        <span v-for="n in 10">{{ n }}</span>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        person: [
          { name: "vue", age: 18, color: "red" },
          { name: "js", age: 20, color: "blue" }
        ]
      }
    });
  </script>
这里我们开始遍历一个 对象一个人的person数组对象，然后使用v-for 先拿到person 人的值，然后在进行遍历 这个值分别拿到，然后可以看到 value是 值，key 是前面的名称，index是索引 
然后下面的span 就会 显示数字 1到10
复制代码

Keeping Track of Elements when using v-for 使用v-for时跟踪元素

 <body>
    <div id="app">
      <ul>
        <li v-for="(ingredient,index) in ingredients">
          {{ ingredient }}---{{ index }} 
        </li>
      </ul>
      <button @click="ingredients.push('spices')">addMe</button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        ingredients: ["meat", "fruit", "cookine"],
        person: [
          { name: "vue", age: 18, color: "red" },
          { name: "js", age: 20, color: "blue" }
        ]
      }
    });
  </script>
这里我们使用v-for 循环拿到ingredients中的内容渲染到页面上了，然后在 下面的按钮中 button 添加了一个 ingredients.push 事件 然后 在里面追加了元素复制代码