文章目录
- 前言
- 1️⃣条件语句
- v-if语句
- v-else语句
- v-else-if语句
- v-show
- 2️⃣循环语句
- v-for 循环语句
- v-if 条件语句结合 v-for
- 3️⃣总结
前言
上一篇中我们学习了vue.js 的模板语法、指令、用户输入等知识点.，现在让我们接着Vue系列的学习，带你成为优质前端程序员。
Vue系列条件语句和循环语句在开发中的作用不可或缺。例如生成动态表格、生成多个相似组件，这里面都有它们的影子。
1️⃣条件语句
Vue.js的条件语句用于根据给定的条件来决定是否展示或渲染特定的内容。
简单来说就是true和false，分别对应不同的操作。
以下是Vue.js中几种常用的条件语句指令：
v-if语句
v-if 指令根据条件的真假来判断是否渲染某个元素或组件。如果条件为真，则渲染该元素或组件；如果条件为假，则不进行渲染。例如：
<div v-if="isActive">这是一个根据条件渲染的内容</div>
上述代码中，只有在 isActive 为真时，才会渲染该 <div> 元素。
实例如下：
<body>
<div id="qiu">
<p v-if="shuo">我显现出来了 by秋说</p>
</div>
</body>
new Vue({
el:'#qiu',
data:{
shuo:true
}
})
通过Vue实例的 data 属性中的 shuo:true，将 shuo 的初始值设置为 true，因此页面加载后，<p> 元素会被渲染，并显示文本内容 “我显现出来了 by秋说”。
浏览器前端回显如下：
v-else语句
v-else 指令用于与 v-if 指令配合使用，表示在 v-if 条件不满足时应该渲染的内容。它必须紧跟在带有 v-if 的元素或组件之后，并且不需要设置条件表达式。例如：
<div v-if="isActive">这是一个条件渲染的内容</div>
<div v-else>这是一个与 v-if 配合使用的条件渲染的内容</div>
上述代码中，如果 isActive 为真，则只会渲染第一个 <div> 元素；如果 isActive 为假，则只会渲染第二个 <div> 元素。
实例如下：
<body>
<div id="app">
<div v-if="Math.random() > 0.5">
成立
</div>
<div v-else>
不成立
</div>
</div>
new Vue({
el: '#app'
})
🧭在这个例子中，<div v-if="Math.random() > 0.5"> 表达式是一个条件判断，它会生成一个随机数，如果随机数大于0.5，那么条件成立，将会渲染显示 <div> 标签中的 “成立” 文本。
而当条件不成立时，即随机数小于等于0.5，v-else 语句块中的 <div> 标签会被渲染，并显示 “不成立” 文本。效果图如下：
v-else-if语句
v-else-if是 Vue.js 中用于条件渲染的指令，它可以配合 v-if 和 v-else 使用，在一系列的条件中进行选择性的渲染。
例如：
<div v-if="condition === 'A'">
这是条件 A 的内容
</div>
<div v-else-if="condition === 'B'">
这是条件 B 的内容
</div>
<div v-else-if="condition === 'C'">
这是条件 C 的内容
</div>
<div v-else>
这是其他条件的内容
</div>
注意：使用 v-else-if 指令时，它必须跟在带有 v-if 或 v-else-if 的元素或组件之后，且它们之间不能插入其他元素或组件
实例如下：
<div id="app">
<div v-if="type === '秋说'">
我是秋说
</div>
<div v-else-if="type === '花无缺'">
我是花无缺
</div>
<div v-else-if="type === '徐霞客'">
我是徐霞客
</div>
<div v-else>
我是谁
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: '秋说'
}
})
如果 type 的值为 '秋说'，则显示“我是秋说”的 <div> 元素。如果 type 的值为 '花无缺'，则显示“我是花无缺”的 <div> 元素。如果 type 的值为 '徐霞客'，则显示“我是徐霞客”的 <div> 元素。否则，显示“我是谁”的 <div> 元素。
回显如下：
v-show
v-show 指令类似于 v-if，但是通过控制元素的 display CSS 属性来判断是否显示元素。如果条件为真，则显示该元素；如果条件为假，则隐藏该元素。例如：
<div v-show="isActive">这是一个条件展示的内容</div>
上述代码中，当 isActive 为真时，该 <div> 元素会显示；当 isActive 为假时，该 <div> 元素会隐藏。
实例如下：
<div id="qiu">
<h1 v-show="can">这是一个v-show实例</h1>
</div>
<script>
new Vue({
el: '#qiu',
data: {
can: true
}
})
当can为true时，元素被展示：
2️⃣循环语句
在 Vue 中，循环语句用于遍历数组或对象，并根据每个元素生成相应的 HTML 元素。Vue 提供了两种循环语句：v-for 和 v-if。
v-for 循环语句
v-for 指令可以用来在模板中基于数据源进行循环渲染。我们可以使用 v-for 来遍历数组和对象，并为每个元素重复渲染一个元素或组件。
以下是 v-for 模板的基本语法：
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>
在上面的示例中，我们使用 v-for="item in items" 来定义一个循环模板。item 是在每次迭代中表示数组中当前元素的变量名，items 是要遍历的数组。
我们还使用了:key="item.id"绑定了一个唯一的键（key），以帮助 Vue 跟踪渲染的元素，并提高性能。通常，建议为 v-for 循环中的每个项提供一个唯一的键。
在循环模板中，还可以使用双括号插值 {{ item.name }} 来输出当前元素的数据。
除了简单的数组循环外，v-for 还支持遍历对象的属性。下面是一个遍历对象的示例：
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
在上面的示例中，我们使用 (value, key) 定义了两个变量来循环遍历对象的键值对。object 是要遍历的对象。
此外，还可以获取当前项的索引值，以及提供额外的循环信息。下面是一个包含了索引的示例：
<div v-for="(item, index) in items">
{{ index }}: {{ item.name }}
</div>
在上面的示例中，我们使用 (item, index) 定义了两个变量来循环遍历数组，并输出每个元素的索引和名称。
实例如下：
<div id="app">
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: '秋说' },
{ id: 2, name: '花无缺' },
{ id: 3, name: '徐霞客' }
]
}
});
在上面的示例中，通过 v-for="item in items"，我们遍历了名为 items 的数组，并使用 {{ item.name }} 渲染每个数组元素的 name 属性。
回显如下：
v-if 条件语句结合 v-for
v-if 条件语句可以与 v-for 循环语句一起使用，根据特定条件来过滤或控制循环的渲染。
基本语法如下：
<div v-for="item in items" :key="item.id" v-if="condition">
{{ item.name }}
</div>
理论要运用到实践中去，举个例子：
<div id="app">
<ul>
<li v-for="item in items" v-if="item.price > 10" :key="item.id">
{{ item.name }} - {{ item.price }}元
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: '苹果', price: 12 },
{ id: 2, name: '香蕉', price: 8 },
{ id: 3, name: '橘子', price: 15 }
]
}
});
在以上代码中，我们使用 v-if="item.price > 10" 来过滤掉价格低于或等于 10 的水果，并只渲染价格大于 10 的水果，回显如下：
3️⃣总结
以上为前端开发：一文带你精通Vue.js前端框架系列（五），带领读者掌握Vue条件语句及循环语句，以上操作读者可躬身实践。
后续将分享前端开发：一文带你精通Vue.js前端框架系列（六），读者可订阅专栏持续学习。
