【人生苦短我学Vue】-【DAY03】-条件判断，循环遍历

最新推荐文章于 2023-06-11 22:39:44 发布

放开这颗白菜让我来

最新推荐文章于 2023-06-11 22:39:44 发布

阅读量215

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44226263/article/details/107333861

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

大家好，我是被白菜拱的猪。

一个热爱学习废寝忘食头悬梁锥刺股，痴迷于girl的潇洒从容淡然coding handsome boy!

这里写目录标题

一、条件判断
二、循环遍历、
三、作业的回顾与完成

一、条件判断

vue会根据v-if的值决定元素是否渲染。

1-v-if的使用

在编写页面的时候我们想要在某些情况下显示某些内容，这时候就可以使用v-if，v-if=’‘boolean’，true就是显示，false就是不显示。
在这里插入图片描述

2-v-if和v-else的结合使用

这就好像if，else。v-if为true时，v-else的内容就不显示。

3-v-if和v-else-if和v-else的使用

相当于java中的if elseif else。

4-用户切换登录小案例以及出现的问题

在这里插入图片描述
点击按钮时，会变成。

代码：

这里出现一个问题。当我们切换的时候，换了一个元素，按理说input里面的值是要变了，但是这里123还是123。这里就要说一说虚拟DOM。

他会复用虚拟DOM里面的元素，提高性能。假如我们不希望出现这种情况的话，我们给input加一个属性key，来保证其唯一性。

5-v-show的使用

v-show和v-if都是决定元素要不要渲染，但是区别在于使用v-if时，DOM里面压根就没有改元素，使用v-show时元素的样式display属性值为none。
所以在频繁切换显不显示的时候使用v-show，仅改变一次的时候使用v-if。

二、循环遍历、

1-v-for循环遍历数组

注意获得索引是使用python中的索引的方式
在这里插入图片描述

2-v-for循环遍历对象

分为三种情况，获取key，获取key，value获取key，value，index。属性是value，key，index。因为对象的值比较重要，所以写在前面。
在这里插入图片描述
官方推荐我们在使用v-for时候加一个:key属性，为了高效的更新虚拟DOM

3-数组响应式方法

（1）push（）在数组最后添加元素
（2）pop（）在数组最后删除元素
（3）shift（）在数组前面删除元素
（4）unshift（）在数组前面添加元素
（5）splice（）添加/替换/删除
第一个参数从哪个元素开始操作

替换：第二个参数表示替换的几个元素，后面是要替换的元素（可以理解为先删除在添加）
删除：第二个参数是删除几个元素，如果没有传，就删除后面所有元素
插入：第二个参数为0，后面跟上要插入的元素。都可以理解为删除几个元素后在添加。

（6）sort（）排序
（7）reverse（）反转

Vue.set(要修改的对象，index，修改后的值)

注意：利用索引修改值不是响应的

三、作业的回顾与完成

题目：
一个列表，第一次为红色，然后点哪个哪个变成红色。
No 代码 you say 个 jb！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(item,index) in movies" :class="{active: currentIndex === index}"
    @click="liClick(index)"
    >{{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      movies: ['天线宝宝','大话西游','海绵宝宝','海上钢琴师'],
      currentIndex: 0
    },
    methods:{
      liClick(index){
        this.currentIndex=index;
      }
    }

  })
</script>
</body>
</html>

放开这颗白菜让我来

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【人生苦短我学Vue】-【DAY03】-条件判断，循环遍历

大家好，我是被白菜拱的猪。一个热爱学习废寝忘食头悬梁锥刺股，痴迷于girl的潇洒从容淡然coding handsome boy!这里写目录标题一、条件判断1-v-if的使用2-v-if和v-else的结合使用3-v-if和v-else-if和v-else的使用4-用户切换登录小案例以及出现的问题5-v-show的使用二、循环遍历、1-v-for循环遍历数组2-v-for循环遍历对象3-数组响应式方法三、作业的回顾与完成一、条件判断vue会根据v-if的值决定元素是否渲染。1-v-if的使用在编写
复制链接

扫一扫

专栏目录