Vue.js 是目前非常流行的一款前端框架，它使用了许多方便实用的特性，其中条件渲染和循环就是帮助我们在Vue.js中更加便捷地处理数据。
条件渲染
条件渲染是通过一个布尔表达式来决定渲染内容的行为。在Vue.js中，常常使用 v-if 指令来进行条件渲染。
<template>
<div>
<p v-if="isShow">这是会显示的内容</p>
<p v-else>这是会隐藏的内容</p>
</div>
</template>在上面的示例代码中，我们使用了 v-if 指令，在 v-if 中我们传递了一个布尔表达式 isShow。这个表达式的值为 true 时，第一个 p 标签会被渲染，值为 false 时，第二个 p 标签会被渲染。
值得注意的是，v-if 指令会根据条件动态地添加或删除元素，同时它也是惰性的，也就是说只有在条件为真的时候才会渲染该元素。这个特性在某些情况下非常有用，因为它可以避免不必要的渲染和计算。
除了 v-if 指令之外，我们还可以使用 v-else 和 v-else-if 指令来支持多重条件渲染。
<template>
<div>
<p v-if="count > 0">count 大于 0</p>
<p v-else-if="count < 0">count 小于 0</p>
<p v-else>count 等于 0</p>
</div>
</template>在上面的代码中，我们传递一个 count 的值，当 count 大于0的时候会显示“count 大于0”的内容，当 count 小于0的时候会显示“count 小于0”的内容，在其他情况下会显示“count 等于0”的内容。
循环
循环是一种常见的数据处理方式，常常用于渲染列表和表格等内容。在Vue.js中，我们可以使用 v-for 指令来进行循环。
<template>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</template>在上面的代码中，我们把一个叫做 items 的数组进行了循环渲染，并将每个元素显示在一个列表中。v-for 指令中我们传递了两个变量：item 和 index。
需要注意的是，在使用 v-for 指令的时候，我们需要使用 :key 给每个循环元素设置一个唯一的键（推荐使用对象的id进行设置）。这个键是为了提高渲染性能而使用的，因为它可以帮助Vue.js更好地跟踪每个循环元素的变化。
除了数组之外，Vue.js还可以循环处理对象和整数范围。下面是一个使用对象进行循环的示例代码：
<template>
<ul>
<li v-for="(value, key, index) in obj" :key="key">{{ key }}: {{ value }}</li>
</ul>
</template>在这个示例代码中，我们将一个叫做 obj 的对象进行循环，并将对象的键和值显示在每个li元素中。
我们还可以使用整数范围来进行循环，下面是一个使用整数范围进行循环的示例代码：
<template>
<ul>
<li v-for="n in 10" :key="n">{{ n }}</li>
</ul>
</template>在这个示例代码中，我们将 n 取值从 1 到 10 进行循环，并将这些值显示在列表中。
总结
Vue.js 中的条件渲染和循环是非常实用的特性，它们可以帮助我们简化代码和提高性能。通过本文的讲解，你应该已经了解了如何使用 v-if 指令进行条件渲染，以及如何使用 v-for 指令进行循环遍历。
在实际开发过程中，我们可能会经常用到这些特性，因此掌握它们的用法非常重要。如果你还没有使用过 Vue.js 或者还不熟悉它的使用方式，那么希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c154d983d39b48815a85b0