关于Vue的一些小笔记（二）条件判断、循环语句、图片切换

最新推荐文章于 2023-12-29 13:55:14 发布

Sandy_Star

最新推荐文章于 2023-12-29 13:55:14 发布

阅读量650

点赞数 6

分类专栏：前端 vue.js 文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/weixin_48931875/article/details/107469356

版权

本文详细介绍了Vue中的条件判断指令v-if、v-else和v-else-if的用法，以及如何使用v-for进行数组和对象的循环渲染。通过一个实际的图片切换例子，演示了如何结合v-if、v-for和v-bind实现图片轮播功能，包括图片数组的定义、索引处理、src属性绑定和状态切换逻辑。

摘要由CSDN通过智能技术生成

前言：这篇主要记下Vue的条件与循环语句，语法类似于c语言，比较好理解。另外加一个小例子。

一、条件判断

1、v-if

在元素和template中使用v-if指令

<div id="app">
    <p v-if="seen">我爱学习</p>
    <template v-if="look">
        <h1>好好学习</h1>
        <p>天天向上</p>
    </template>
</div>
<scrtpt>
    new Vue({
    	el:"#app",
    	data:{
    		seen:true,
    		look:true
    }
})
</scrtpt>

在字符串模板中，如Handlebars,写下面这样的模板块

<!-- Handlebars模板-->
{
  {#if ok}}
	<h1>yes</h1>
{
  {/if}}

2、v-else

可以用v-else指令给v-if添加一个"else"块，v-else要跟在v-if 或 v-else-if的后面。

<div id="app">
    <div v-if="Math.random()>0.5">我爱学习</div>
    <div v-else>
       我不爱学习
    </div>
</div>
<scrtpt>
    new Vue({
    	el:"#app"
})
</scrtpt>